The contrast() CSS function adjusts the contrast of the input image. Its result is a <filter-function>.

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

contrast(amount)

Values

amount Optional

The contrast of the result, specified as a <number> or a <percentage>. 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.

The following are pairs of equivalent values:

contrast(0)    /* Completely gray */
contrast(0%)

contrast(0.65) /* 65% contrast */
contrast(65%)

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

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

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 and monospaced text, color shifting to the area behind the <p> and <code>.

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

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.

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

With url() and the SVG contrast filter

The SVG <filter> element is used to define custom filter effects that can then be referenced by id. The <filter>'s <feComponentTransfer> primitive enables pixel-level color remapping. Given the following:

<svg
  xmlns="http://www.w3.org/2000/svg"
  id="svg"
  viewBox="0 0 240 151"
  height="0"
  width="0"
  overflow="visible"
  color-interpolation-filters="sRGB">
  <filter id="contrast">
    <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>

These values produce the same results:

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

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

Specifications

Browser compatibility

See also

• CSS filter effects module
• The other <filter-function> functions available to be used in values of the filter and backdrop-filter properties include:
  • blur()
  • brightness()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()