1. Web
  2. CSS
  3. Reference
  4. Values
  5. <filter-function>
  6. invert()

invert() CSS function

Baseline
Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

The invert() CSS function inverts the color samples in the input image. It is used as a value for the filter and backdrop-filter properties.

Try it

filter: invert(0);

filter: invert(0.3);

filter: invert(50%);

filter: invert(70%);

filter: invert(1);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css
/* No inversion */
invert(0)

/* Complete inversion */
invert()
invert(1)
invert(100%)

/* 60% inversion */
invert(.6)
invert(60%)

Parameters

<number> or <percentage> Optional

Specifies the amount of the conversion. A value of 100% applies a complete inversion, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. Values above 100% are allowed, but the effect is clamped to 100%. Negative values are not allowed. The initial value for interpolation is 0. The default value is 1.

Return value

A <filter-function> value.

Formal syntax

<invert()> = 
  invert( [ <number> | <percentage> ]? )

Examples

Using the SVG filter

This example shows three images for comparison: an image with an invert() filter function applied, an image with the equivalent SVG filter applied, and the original image.

SVG

The SVG <feComponentTransfer> filter element can also be used to invert content by creating equivalent inversion on nested <feFuncR>, <feFuncG>, and <feFuncB> table elements. We set the same tableValue for the red, green, and blue filter primitives to the same value, then we can reference the SVG effect by the ID of the <filter>:

html
<svg height="0" role="none">
  <filter id="invert70" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.7 0.3" />
      <feFuncG type="table" tableValues="0.7 0.3" />
      <feFuncB type="table" tableValues="0.7 0.3" />
    </feComponentTransfer>
  </filter>
</svg>

The following declarations produce the same effect:

css
filter: invert(0.7);
filter: invert(70%);
filter: url("#invert70"); /* with embedded SVG */
filter: url("fileName.svg#invert70"); /* external SVG */

CSS

We include CSS that will invert elements based on their css-filter or svg-filter class:

css
.css-filter {
  filter: invert(0.7);
}

.svg-filter {
  filter: url("#invert70");
}

Specifications

Specification
Filter Effects Module Level 1
# funcdef-filter-invert

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content