contrast()
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. Its result is a <filter-function>
.
Try it
Syntax
contrast(amount)
Values
amount
-
The contrast of the result, specified as a
<number>
or a<percentage>
. A value under100%
decreases the contrast, while a value over100%
increases it. A value of0
or0%
will create an image that is completely gray, while a value of1
or100%
leaves the input unchanged. Negative values are not allowed. The initial value for interpolation is1
.
The following are pairs of equivalent values:
contrast(0) /* Completely gray */
contrast(0%)
contrast(0.65) /* 65% contrast */
contrast(65%)
contrast(1) /* No effect */
contrast(100%)
contrast(2) /* Double contrast */
contrast(200%)
Formal syntax
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(image.jpg) no-repeat center / contain #339;
}
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:
<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>
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
Specification |
---|
Filter Effects Module Level 1 # funcdef-filter-contrast |
Browser compatibility
BCD tables only load in the browser
See also
- CSS filter effects module
- The other
<filter-function>
functions available to be used in values of thefilter
andbackdrop-filter
properties include: