saturate() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<img class="saturate" src="images/nature.jpg" alt="Nature Image">

CSS

.saturate {

    filter: saturate(10%);

}

Result

Editor

Browser Support

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

Desktop

12	53	35	40	9.1

Tablets / Mobile

53	35	41	9.3	6	4.4

Last updated by CSSPortal on: 7th October 2023

Support Us