1. Web
  2. CSS
  3. Reference
  4. Values
  5. <filter-function>
  6. contrast()

contrast() CSS function

Baseline
Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

The contrast() CSS function adjusts the contrast of the input image. It is used as a value for the filter and backdrop-filter properties.

Try it

filter: contrast(1);

filter: contrast(1.75);

filter: contrast(50%);

filter: contrast(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

Syntax

css
/* Completely gray */
contrast(0)

/* No change */
contrast()
contrast(1)
contrast(100%)

/* 60% contrast */
contrast(.6)
contrast(60%)

/* Double contrast */
contrast(2)
contrast(200%)

Parameters

<number> or <percentage> Optional

Specifies the amount of the conversion. A value under 100% decreases the contrast, while a value over 100% increases it. A value of 0 or 0% will create an image that is completely gray, while a value of 1 or 100% leaves the input unchanged. Negative values are not allowed. The initial value for interpolation is 1. The default value is 1.

Return value

A <filter-function> value.

Formal syntax

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

Examples

With the backdrop-filter property

This example applies a contrast() filter via the backdrop-filter CSS property to the paragraph, shifting the color of the area behind the <p>.

css
.container {
  background: url("unity_for_the_people.jpg") no-repeat center / contain #333399;
}
p {
  backdrop-filter: contrast(0.2);
}

With the filter property

This example applies a contrast() filter via the filter CSS property, changing contrast by shifting colors of the entire element, including content, border, background, and shadows.

css
p:first-of-type {
  filter: contrast(30%);
}
p:last-of-type {
  filter: contrast(300%);
}

Using the SVG filter

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

SVG

The SVG <feComponentTransfer> filter element can also be used to adjust the contrast of content by creating equivalent contrast adjustments on nested <feFuncR>, <feFuncG>, and <feFuncB> linear elements. We set the same slope and intercept for the red, green, and blue filter primitives, then we can reference the SVG effect by the ID of the <filter>:

html
<svg height="0" role="none">
  <filter id="contrast200" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="linear" slope="2" intercept="-0.5" />
      <feFuncG type="linear" slope="2" intercept="-0.5" />
      <feFuncB type="linear" slope="2" intercept="-0.5" />
    </feComponentTransfer>
  </filter>
</svg>

The following declarations produce the same effect:

css
filter: contrast(2);
filter: contrast(200%);
filter: url("#contrast200"); /* with embedded SVG */
filter: url("fileName.svg#contrast200"); /* external SVG */

CSS

We include CSS that will adjust the contrast of elements based on their css-filter or svg-filter class:

css
.css-filter {
  filter: contrast(2);
}

.svg-filter {
  filter: url("#contrast200");
}

Specifications

Specification
Filter Effects Module Level 1
# funcdef-filter-contrast

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content