contrast()

Anonymous contributor's avatar
Anonymous contributor
Anonymous contributor's avatar
Anonymous contributor
Published Jul 12, 2021Updated Nov 22, 2023
Contribute to Docs

Defines the contrast on an element.

Syntax

filter: contrast(<value>);

where a required <value> can be one of the following:

  • Number value: 0, 1.4
  • Percentage value: 100%, 50%

Note: Values of 1 and 100% will have no effect. Values greater than 1 and 100% will increase the contrast. Values less than 1 and 100% will decrease the contrast. A value of 0 and 0% will be completely gray.

Example 1

Give the image a contrast of 200%:

.banner-image {
filter: contrast(200%);
}

Comparison of an image with increased contrast with the original image

Here, the original image is on the left and the image on the right has the filter set at contrast(200%)

All contributors

Looking to contribute?

Learn CSS on Codecademy