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
Explorer Edge Chrome Firefox Opera Safari
X125335409.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
535335419.36.0

Last updated by CSSPortal on: 1st December 2019