invert() CSS Function

Description

The invert() function inverts the colors in the image. In its action, it is similar to turning a photograph into a negative.

Syntax

invert() = invert( <number-percentage>? )

Values

  • number-percentageA value of 0 leaves the image original. A value of 100% or 1 completely inverts the colors of the picture. Values ​​from 0% to 100% or from 0 to 1 invert colors partially.

Example

<img class="invert" src="images/nature.jpg" alt="Invert Example">
.invert {

   filter: invert(100%);

}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 1st December 2019