CSS Saturate

The saturate() function in CSS is used to increase or decrease the saturation of an image. Saturation refers to the intensity of a color in an image.

Syntax

saturate(percentage)

The saturate() function takes a percentage value as its parameter, where 0% means completely desaturated (black and white) and 100% means fully saturated.

Example

img {
  filter: saturate(200%);
}

In the above example, the saturate() function is used to increase the saturation of an image to 200%.

Browser Support

The saturate() function is supported in all modern browsers, including Firefox, Chrome, Safari, Edge, and Opera. However, it is not supported in Internet Explorer.

Conclusion

The saturate() function in CSS is a useful tool for adjusting the saturation of an image. It can be used to create interesting effects or simply to enhance the colors in an image.