saturate() CSS Function

Description

The saturate() CSS function changes the color saturation in an image.

Syntax

saturate() = filter: saturate(<value>); 

Values

• <value>A value of 0% or 0 completely removes the color saturation in the image, turning it into black and white. A value of 100% or 1 leaves the image unchanged. Any values ​​greater than 100% or greater than 1 make the colors in the image more saturated. A negative value is not allowed. An empty value is taken as 1.

Example

<img class="saturate" src="images/nature.jpg" alt="Nature Image">

.saturate {

    filter: saturate(10%);

}

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