CSS invert()

Anonymous contributor's avatar
Anonymous contributor
Published Jul 13, 2021Updated Dec 6, 2023

Inverts the colors of an element.

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours

Syntax

filter: invert(<value>);

where a required <value> can be one of the following:

  • Number value: 0, .4
  • Percentage value: 100%, 50%

Note: A value of 0 and 0% will leave image unchanged. Values of 1 and 100% will result in picture completely inverted. Value defaults to 1 and negatives values are not allowed.

Example 1

Invert an image 75%:

.banner-image {
  filter: invert(75%);
}

The following output demonstrates the invert filter on a background image. The image on the left has no filter, while the image on the right has a filter invert(75%) applied.

Compares the original image to the same image with an invert filter applied

All contributors

Learn CSS on Codecademy

  • Career path

    Front-End Engineer

    Front-end engineers work closely with designers to make websites beautiful, functional, and fast.
    • Includes 34 Courses
    • With Professional Certification
    • Beginner Friendly.
      115 hours
  • Career path

    Full-Stack Engineer

    A full-stack engineer can get a project done from start to finish, back-end to front-end.
    • Includes 51 Courses
    • With Professional Certification
    • Beginner Friendly.
      150 hours