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