This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Flips an element’s colors, for use by the filter property. A decimal value between 0 and 1 or percentage up to 100% controls the extent of the color-negative effect, with 0.5 or 50% producing gray.

This CSS property value is reflected in the following image:

filter: invert(100%);
filter: invert(1); /* same */



The following example shows the difference between two images, where one has a been inverted for 75%:

filter invert.png

<!DOCTYPE html>
    <title>Filter example</title>
      .foo {
        float: left;

      .bar {
        -webkit-filter: invert(75%);
    <img src="/logo/wplogo_transparent_xlg.png" class="foo" />
    <img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />

View live example


The CSS filter corresponds to this SVG filter definition, based on a variable amount passed to the function:

<filter id="invert">
    <feFuncR type="table" tableValues="[amount] (1 - [amount])"/>
    <feFuncG type="table" tableValues="[amount] (1 - [amount])"/>
    <feFuncB type="table" tableValues="[amount] (1 - [amount])"/>

Related specifications

Filter Effects 1.0
Editor’s Draft
Filter Effects 1.0
Working Draft

See also

Related articles


External resources