contrast()
Summary
Adjusts the difference between light and dark values, for use by the filter property. A value of 100% or a decimal value of 1 leaves the image as is, while 0 results in black. Increasing the value past 1 or 100% produces more dramatically stratified areas of light and dark.
This CSS property value is reflected in the following image:
filter: contrast(200%);
filter: contrast(2); /* same */
Examples
The following example shows the difference between three images, the first has the default contrast, the second one a lower contrast and the third a higher:
<!DOCTYPE html>
<html>
<head>
<title>Filter example</title>
<style>
.foo {
float: left;
}
.bar {
-webkit-filter: contrast(50%);
}
.baz {
-webkit-filter: contrast(1.5);
}
</style>
</head>
<body>
<img src="/logo/wplogo_transparent_xlg.png" class="foo" />
<img src="/logo/wplogo_transparent_xlg.png" class="foo bar" />
<img src="/logo/wplogo_transparent_xlg.png" class="foo baz" />
</body>
</html>
Notes
The CSS filter corresponds to this SVG filter definition, based on a variable amount passed to the function:
<filter id="contrast">
<feComponentTransfer>
<feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
<feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
<feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount] + 0.5)"/>
</feComponentTransfer>
</filter>
Related specifications
- Filter Effects 1.0
- Editor’s Draft
- Filter Effects 1.0
- Working Draft
See also
Related articles
Filters
contrast()