CSS invert() Function

Use the invert() function to invert the samples in an image.

The CSS invert() function is used with the filter property to invert the samples in an image.

The invert() function requires an argument to be passed to it. This argument determines the proportion of the conversion that's applied to the image. The argument can be either a percentage value or a number.

Using Percentages

Here's an example using a percentage value to make an image completely inverted:

<style>
  .less {
    filter: invert(100%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="less" src="/pix/samples/1s.jpg" alt="Sample image">

Here's an example using a percentage value to make the image partially inverted:

<style>
  .less {
    filter: invert(70%);
  }
</style>

<img src="/pix/samples/1s.jpg" alt="Sample image">
<img class="less" src="/pix/samples/1s.jpg" alt="Sample image">

Using Numbers

Here's an example using a number:

<style>
  .filtered {
    filter: invert(0.8);
  }
</style>

<img src="/pix/samples/13m.jpg" alt="Sample image">
<img class="filtered" src="/pix/samples/13m.jpg" alt="Sample image">

Official Syntax

The official syntax of the invert() function is as follows:

Possible Values

The invert() function accepts a percentage value or a number as its argument. This argument determines the proportion of the conversion.

A value of 100% results in an image that's completely inverted. A value of 0% results in an image that's unchanged. Values between 0% and 100% are linear multipliers on the effect.

The specification allows amounts over 100%, but this will have no further effect on the image (i.e. the user agent will clamp it to 1).

A number value of 0.5 has the same effect as the percentage value 50%. A value of 1 is the same as 100%.

Negative values are not allowed.

CSS Specifications

The invert() function is defined in Filter Effects Module Level 1 (W3C Working Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.