invert()
Summary
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 */
Examples
The following example shows the difference between two images, where one has a been inverted for 75%:
<!DOCTYPE html>
<html>
<head>
<title>Filter example</title>
<style>
.foo {
float: left;
}
.bar {
-webkit-filter: invert(75%);
}
</style>
</head>
<body>
<img src="/logo/wplogo_transparent_xlg.png" class="foo" />
<img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />
</body>
</html>
Notes
The CSS filter corresponds to this SVG filter definition, based on a variable amount passed to the function:
<filter id="invert">
<feComponentTransfer>
<feFuncR type="table" tableValues="[amount] (1 - [amount])"/>
<feFuncG type="table" tableValues="[amount] (1 - [amount])"/>
<feFuncB type="table" tableValues="[amount] (1 - [amount])"/>
</feComponentTransfer>
</filter>
Related specifications
- Filter Effects 1.0
- Editor’s Draft
- Filter Effects 1.0
- Working Draft
See also
Related articles
Filters
invert()