Published Jul 13, 2021Updated Sep 3, 2021
Contribute to Docs

Inverts the colors of an element.


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 25%:

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

All contributors

Looking to contribute?

Learn CSS on Codecademy