contrast() CSS Function

Description

The CSS contrast() function adjusts the contrast of an image. It is a filter function, which means that it can be applied to images using the filter property.

The contrast() function takes a single parameter, which is the amount of contrast to apply to the image. The value of the parameter can be a number or a percentage. A value of 0% will produce an image that is completely gray, while a value of 100% will leave the image unchanged. Values over 100% will increase the contrast of the image, and values under 100% will decrease the contrast.

Here is an example of how to use the contrast() function:

img {
  filter: contrast(150%);
}

This code will increase the contrast of all images on the page by 150%.

The contrast() function can be used to improve the readability and accessibility of images. For example, increasing the contrast of an image can make it easier to see for people with low vision.

Here are some additional things to keep in mind about the contrast() function:

• The contrast() function is only supported in browsers that support the filter property.
• The contrast() function can be combined with other filter functions to create more complex effects.
• It is important to use the contrast() function carefully, as too much contrast can make images look harsh and unnatural.

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

The following table will show you the current browser support for the CSS contrast() function.

Desktop
12	53	35	40	9.1

Tablets / Mobile
53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023