saturate()

Published Jul 13, 2021Updated Sep 3, 2021
Contribute to Docs

Increase or decrease the intensity of the color of the element it is applied to.

Syntax

filter: saturate(<value>);

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

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

Note: Value defaults to 1 or 100% leaving element unchanged. Higher values will increase saturation. A value of 0 and 0% will remove all color leaving the element completely unsaturated. Negative values are not allowed.

Example 1

Set the saturation of a color to 25%:

.banner-image {
filter: saturate(25%);
}

All contributors

Looking to contribute?

Learn CSS on Codecademy