saturate() CSS Function

Description

The CSS saturate() function is used to adjust the saturation of an image. Saturation refers to the intensity of the colors in an image. A higher saturation level results in more vibrant colors, while a lower saturation level results in more muted colors.

The saturate() function takes a single argument, which is the amount of saturation to apply to the image. This can be specified as a percentage or a number. A percentage value of 100% leaves the image unchanged, while a value of 0% results in a completely unsaturated image. Values over 100% will super-saturate the image, making the colors even more vibrant.

The saturate() function can be used to create a variety of different effects, such as:

  • Desaturating an image to create a black and white or sepia tone effect.
  • Super-saturating an image to create a more vibrant and eye-catching effect.
  • Adjusting the saturation of individual colors in an image to create a more balanced or harmonious look.

The saturate() function is used in conjunction with the filter CSS property. For example, the following CSS code would desaturate an image with the ID my-image:

#my-image {
  filter: saturate(50%);
}

Here is an example of how to use the saturate() function to create a super-saturated image:

.super-saturated {
  filter: saturate(150%);
}

The saturate() function is a powerful resource that can be used to create a variety of different effects with images. It is supported by all major browsers.

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

The following table will show you the current browser support for the CSS saturate() function.

Desktop
Edge Chrome Firefox Opera Safari
125335409.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
5335419.364.4

Last updated by CSSPortal on: 7th October 2023