`invert()` CSS function

The invert() CSS function inverts the color samples in the input image. Its result is a <filter-function>.

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

/* 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% is completely inverted, while a value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. The initial value for interpolation is 0. The default value is 1.

Formal syntax

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

SVG filter

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

<svg role="none">
  <filter id="invert90">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.1 0" />
      <feFuncG type="table" tableValues="0.1 0" />
      <feFuncB type="table" tableValues="0.1 0" />
    </feComponentTransfer>
  </filter>
</svg>

The following declarations produce the same effect:

filter: invert(0.9);
filter: invert(90%);
filter: url("#invert90"); /* with embedded SVG */
filter: url("fileName.svg#invert90"); /* external SVG */

Examples

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

SVG

We create an SVG filter that inverts the content on which it is applied by 70%:

<svg height="0">
  <filter id="invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.3 0" />
      <feFuncG type="table" tableValues="0.3 0" />
      <feFuncB type="table" tableValues="0.3 0" />
    </feComponentTransfer>
  </filter>
</svg>

CSS

We include CSS that will invert elements based on their filter or svgFilter class:

.filter {
  filter: invert(70%);
}

.svgFilter {
  filter: url("#invert");
}

th,
td {
  padding: 5px;
}

<table>
  <thead>
    <tr>
      <th><code>invert()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="svgFilter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgInvert">
            <feComponentTransfer>
              <feFuncR type="table" tableValues="0.3 0" />
              <feFuncG type="table" tableValues="0.3 0" />
              <feFuncB type="table" tableValues="0.3 0" />
            </feComponentTransfer>
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgInvert')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

Specifications

Browser compatibility

See also

The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• opacity()
• saturate()
• sepia()