contrast()
The contrast()
CSS function adjusts the contrast of the input image. Its result is a <filter-function>
.
Try it
Syntax
css
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:
css
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>
.
css
.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.
css
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
<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:
css
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: