saturate() | CSS-Tips

The CSS saturate() perform will increase or decreases a component’s coloration saturation stage, or in different phrases, the depth of the factor’s coloration. The saturate() is used alongside the filter or backdrop-filter properties.

img {
  filter: saturate(200%);
}

The CSS saturate() perform is outlined within the Filter Results Module Stage 1 specification.

Syntax

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

 = saturate( [  |  ]? )

In observe, we write it as:

filter: saturate();

Argument

The saturate() perform takes a single argument, which could be a optimistic decimal or proportion worth. The argument determines the brand new saturation for the enter factor, the place:

• 0 or 0% dries out all coloration from the factor, leading to a grayscale picture.
• 1 or 100% leaves the factor fully unchanged.
• Values above 1 or 100% enhance the saturation linearly.

Unfavorable values aren’t allowed.

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

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

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

/* Unfavorable worth */
filter: saturate(-1.5); /* Invalid */

Fundamental utilization

The saturate() filter isn’t used by itself. As an alternative, we normally couple it with different filter-related capabilities to provide extra fascinating results. As an illustration, we are able to mix saturate() with distinction() to present parts an excessively vivid, colourful impact.

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

…whereas a barely elevated distinction and a decrease saturation assist improve the impact of a mid-range sepia, giving a classic filter impact:

.classic {
  filter: saturate(60%) sepia(40%) distinction(110%);
}

And in one thing like a background, we are able to use low saturate() and brightness() values to scale back the colours and brightness of the background picture, together with blur(4px) to scale back its visibility.

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

See examples of every of those within the following demo:

Instance: Music preview background

In addition to picture filters alone, we are able to use the saturate() perform for extra sensible instances. For instance, we may recreate the previews of music apps like Spotify or Apple Music utilizing saturate() + different CSS filters:

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

Whereas the blur() and brightness() filters soften and darken the background, the saturate() filter boosts its colours so they’re clearly seen.

Toggle the “vivid mode,” and also you’ll discover that saturate(200%) is important to maintain the background colours from wanting uninteresting and washed.

Instance: Film card picture

Think about we’re making a film app. Then, we should always have a bit to showcase new and coming-soon motion pictures. And to maintain all film posters across the similar vivid tone, we may use the saturate() perform to extend the purity of the poster’s coloration (together with another filters) and provides it extra life.

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

A barely elevated distinction additional distinguishes the darkish and lightweight factors, whereas a low sepia provides heat.

The browser applies filters to a picture in the identical order as they’re declared.

As soon as once more, we are able to toggle the “Increase Saturation” swap to see what the picture would seem like with different filters and no elevated saturation.

Utilizing saturate() with backdrop-filter

Whereas the filter property applies saturation to the factor itself, the backdrop-filter property applies the filter to the world behind it.

An excellent illustration of this combo is a “color-pop” cursor. It’s a floating factor that strikes with the mouse, saturating solely the portion of the background picture it covers.

To get began, we’ll want slightly JavaScript to get the cursor coordinates into CSS:

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

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

And initially decrease the background picture’s saturation.

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

This enables the impact to pop when the person hovers the highlight over a bit of the background.

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

On hover, the cursor space is supersaturated, making the colours extra vibrant.

Specification

The CSS saturate() perform is outlined, amongst different filter capabilities, within the Filter Results Module 1 specification, which is at present in Editor’s Draft.

Browser assist

The saturate() perform is at present supported by all trendy browsers.

Associated