CSS Attributes Index CSS Filters
Sets the level of saturation for an input image.
{ filter: saturate(number | percentage) }
| number |
Absolute positive floating-point number or a relative percentage value. |
The property is read/write with a default value of 1.
The saturate( ) CSS function adjusts a visual object’s color saturation level, effectively making the image appear more or less vivid.
The passed parameter defines the amount of deviation from the element’s default saturation value.
A value of 1 or 100% leaves the input unchanged, while a value of 0 or 0% renders the input image completely unsaturated ( no color ).
Values less than 1 ( or <100% ) reduces the effect, while values more than 1 ( or >100 ) increases the effect.
Negative values ( < 0 ) are ignored and render the element unchanged.
Saturate with values between 0 and 1 or between 0% and 100%.
filter: saturate(0) |
filter: saturate(.25) |
filter: saturate(.75) |
 |
|
|
| |
filter: saturate(30%) |
filter: saturate(60%) |
filter: saturate(100%) |
|
|
|
Saturate with a value more than 1 or more than 100%.
filter: saturate(1.25) |
filter: saturate(2.5) |
filter: saturate(5) |
|
|
|
filter: saturate(175%) |
filter: saturate(350%) |
filter: saturate(700%) |
|
|
|
Saturate with a negative value. Image is unchanged.
filter: saturate(-10) |
|
grayscale hue-rotate invert opacity sepia