CSS saturate() Function
saturate() function to adjust the saturation of an image.
saturate() function is used with the
filter property to adjust the saturation levels in an image.
saturate() function requires an argument to be passed to it. This argument determines the proportion of the saturation that's applied to the image. The argument can be either a percentage value or a number.
Here's an example using a percentage value to make an image super-saturated:
Here's an example using a percentage value to make an image partially saturated:
Here's an example using a number:
The official syntax of the
saturate() function is as follows:
saturate() = saturate( [ <number> | <percentage> ] )
A value of
100% results in an image that's unchanged. A value of
0% results in an image that's completely un-saturated. Other values apply linear multipliers on the effect.
A saturation value over
100% will result in a super-saturated image.
A number value of
0.5 has the same effect as the percentage value
50%. A value of
1 is the same as
Negative values are not allowed.
The following table provided by Caniuse.com shows the level of browser support for this feature.