CSS saturate() Function

❮ CSS Functions Reference

Example

Set various saturations for an image:

#img1 {
filter: saturate(0);
}

#img2 {
filter: saturate(100%);
}

#img3 {
filter: saturate(200%);
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The CSS saturate() filter function adjusts the saturation (color intensity) of an element.

0% (0) will make the element completely unsaturated
100% (1) will have no effect
200% (2) will make the element super saturated

Version:	CSS Filter Effects Module Level 1

Browser Support

The numbers in the table specify the first browser version that fully supports the function.

Function
saturate()	18	12	35	6	15

CSS Syntax

saturate(amount)

Value	Description
amount	Optional. Specifies the saturation as a number or percent. 0% (0) will make the element completely un-saturated. 100% (1) represents no effect. Values over 100% provides super-saturated results

More Examples

Example

Use saturate() with the backdrop-filter property:

div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: saturate(450%);
backdrop-filter: saturate(450%);
padding: 20px;
margin: 30px;
font-weight: bold;
}

Try it Yourself »

CSS reference: CSS filter property.

CSS reference: CSS blur() function.

CSS reference: CSS brightness() function.

CSS reference: CSS contrast() function.

CSS reference: CSS drop-shadow() function.

CSS reference: CSS grayscale() function.

CSS reference: CSS hue-rotate() function.

CSS reference: CSS invert() function.

CSS reference: CSS opacity() function.

CSS reference: CSS sepia() function.

❮ CSS Functions Reference