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.



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 */



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:

filter contrast.png

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

      .bar {
        -webkit-filter: contrast(50%);

      .baz {
        -webkit-filter: contrast(1.5);
    <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" />

View live example


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

<filter id="contrast">
    <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)"/>

Related specifications

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

See also

Related articles


External resources