invert()
Published Jul 13, 2021Updated Sep 3, 2021
Contribute to Docs
Inverts the colors of an element.
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 25%
:
.banner-image {filter: invert(25%);}
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.