saturate() | CSS-Tricks

The CSS saturate() function increases or decreases an element’s color saturation level, or in other words, the intensity of the element’s color. The saturate() is used alongside the filter or backdrop-filter properties.

img {
  filter: saturate(200%);
}

The CSS saturate() function is defined in the Filter Effects Module Level 1 specification.

Syntax

The saturate() function’s formal syntax is given as:

<saturate()> = saturate( [ <number> | <percentage> ]? )

In practice, we write it as:

filter: saturate(<amount>);

Argument

The saturate() function takes a single argument, which can be a positive decimal or percentage value. The argument determines the new saturation for the input element, where:

0 or 0% dries out all color from the element, resulting in a grayscale image.
1 or 100% leaves the element completely unchanged.
Values above 1 or 100% increase the saturation linearly.

Negative values aren’t allowed.

/* Using percentages */
filter: saturate(0%); /* Completely grayscale */
filter: saturate(50%); /* Low saturation */
filter: saturate(100%); /* Unchanged */
filter: saturate(150%); /* Oversaturated by 1.5x  */

/* Decimal or percentage  */
filter: saturate(0.5);
filter: saturate(50%);

/* No argument */
filter: saturate(); /* Same as 100% or 1 */

/* Negative value */
filter: saturate(-1.5); /* Invalid */

Basic usage

The saturate() filter is rarely used on its own. Instead, we usually couple it with other filter-related functions to produce more interesting effects. For instance, we can combine saturate() with contrast() to give elements an overly vivid, colorful effect.

.dramatic {
  filter: saturate(180%) contrast(120%);
}

…while a slightly increased contrast and a lower saturation help enhance the effect of a mid-range sepia, giving a vintage filter effect:

.vintage {
  filter: saturate(60%) sepia(40%) contrast(110%);
}

And in something like a background, we can use low saturate() and brightness() values to reduce the colors and brightness of the background image, along with blur(4px) to reduce its visibility.

.background {
  filter: saturate(50%) brightness(60%) blur(4px);
}

See examples of each of these in the following demo:

Example: Music preview background

Besides image filters alone, we can use the saturate() function for more practical cases. For example, we could recreate the previews of music apps like Spotify or Apple Music using saturate() + other CSS filters:

.music-bg img {
  filter: blur(30px) saturate(200%) brightness(60%);
}

While the blur() and brightness() filters soften and darken the background, the saturate() filter boosts its colors so they are clearly visible.

Toggle the “vivid mode,” and you’ll notice that saturate(200%) is necessary to keep the background colors from looking dull and washed.

Example: Movie card image

Imagine we’re creating a movie app. Then, we should have a section to showcase new and coming-soon movies. And to keep all movie posters around the same vivid tone, we could use the saturate() function to increase the purity of the poster’s color (along with some other filters) and give it more life.

.movie-card img {
  filter: contrast(130%) saturate(140%) sepia(20%);
}

A slightly increased contrast further distinguishes the dark and light points, while a low sepia adds warmth.

The browser applies filters to an image in the same order as they are declared.

Once again, we can toggle the “Boost Saturation” switch to see what the image would look like with other filters and no increased saturation.

Using `saturate()` with `backdrop-filter`

While the filter property applies saturation to the element itself, the backdrop-filter property applies the filter to the area behind it.

A good illustration of this combo is a “color-pop” cursor. It’s a floating element that moves with the mouse, saturating only the portion of the background image it covers.

To get started, we’ll need a little JavaScript to get the cursor coordinates into CSS:

const cursor = document.getElementById("cursor");

window.addEventListener("mousemove", (e) => {
    cursor.style.left = e.clientX + "px";
    cursor.style.top = e.clientY + "px";
});

And initially lower the background image’s saturation.

img {
    filter: saturate(30%) brightness(80%);
}

This allows the effect to pop when the user hovers the spotlight over a section of the background.

.cursor {
    backdrop-filter: saturate(400%) contrast(110%);
}

On hover, the cursor area is supersaturated, making the colors more vibrant.

Specification

The CSS saturate() function is defined, among other filter functions, in the Filter Effects Module 1 specification, which is currently in Editor’s Draft.