contrast() CSS Function
Description
The contrast()
CSS function lowers or increases the contrast of images or background images.
Syntax
contrast() = contrast( <number-percentage>? )
Values
- number-percentageSpecified as a <number> or a <percentage>. A value under 100% decreases the contrast, while a value over 100% increases it. A value of 0% will create an image that is completely grey, while a value of 100% leaves the input unchanged. The lacuna value for interpolation is 1.
Example
<img class="contrast" src="images/nature.jpg" alt="ConstrastExample">
<img class="contrast2" src="images/nature.jpg" alt="ConstrastExample">
.contrast {
filter: contrast( 150% );
}
.contrast2 {
filter: contrast( 25% );
}
Browser Support
Desktop | |||||
X | 12 | 53 | 35 | 40 | 9.1 |
Tablets / Mobile | |||||
![]() |
|||||
53 | 53 | 35 | 41 | 9.3 | 6.0 |
Last updated by CSSPortal on: 1st December 2019