CSS saturate() Function

CSS saturate() Function

The CSS saturate() function increases or decreases the color saturation of an element.

It is used with the filter and backdrop-filter properties to control how vivid or muted colors appear. The function accepts a number or percentage, allowing colors to be reduced to grayscale, left unchanged, or made more intense.

Syntax

filter: saturate(amount);

The saturate() function accepts an optional number or percentage that controls the saturation adjustment.

For example:

filter: saturate(0);
filter: saturate(0.5);
filter: saturate(1);
filter: saturate(1.5);
filter: saturate(200%);

The function can also be written without an argument:

filter: saturate();

When the argument is omitted, the function uses a value of 1, equivalent to 100%, which leaves the original saturation unchanged.

The function returns a CSS <filter-function> value rather than a standalone color value.

It must be used in a property that accepts filter functions, such as filter or backdrop-filter.

Parameters

The saturate() function accepts one optional parameter.

The amount determines how much color saturation remains or how strongly it is increased.

• 0 or 0%: Removes saturation, producing a grayscale result.
• Between 0 and 1: Reduces saturation.
• 1 or 100%: Leaves saturation unchanged.
• Greater than 1: Increases saturation.

For example:

.muted {
  filter: saturate(0.4);
}
.vivid {
  filter: saturate(2);
}

The first declaration reduces saturation to 40% of the original level. The second applies a saturation multiplier of 2.

Negative values are not allowed.

How It Works

Color saturation describes how intense or muted a color appears. Highly saturated colors look vivid, while colors with little saturation appear closer to shades of grey.

The saturate() function adjusts the rendered colors of an element by applying a color transformation.

For example:

img {
  filter: saturate(50%);
}

This reduces the saturation of the image, making its colors appear less vivid.

Increasing the value produces stronger colors:

img {
  filter: saturate(200%);
}

This applies twice the normal saturation multiplier.

The function affects the rendered appearance of the element without changing the original image file or its underlying CSS color values.

When applied to a container using the filter property, the effect also includes the container's rendered contents, including text, images, backgrounds, and descendants.

The adjustment is calculated using an RGB color matrix. It is not the same as directly editing the saturation component of an HSL color, so hue and lightness are not necessarily preserved exactly.

Saturation Values

Different values produce different levels of color intensity.

Values greater than 1 are permitted and do not have a fixed upper limit in the function's syntax.

However, the visible effect depends on the original colors. Colors that are already highly saturated may show little additional change because rendered color channels have practical limits.

For example, applying a high saturation value to a bright red element may produce less visible change than applying the same value to a muted photograph.

A grayscale image cannot regain its original colors simply by applying a high saturation value. If the input contains only neutral grey values, the saturation filter has no color differences to amplify.

Numbers and Percentages

The saturate() function accepts both numbers and percentages. The two forms are interchangeable when they represent the same multiplier.

For example, these declarations are equivalent:

filter: saturate(0.6);
filter: saturate(60%);

Both apply a saturation multiplier of 60%.

Likewise:

filter: saturate(2);
filter: saturate(200%);

Both apply a multiplier of 2.

Percentages can be easier to read when describing visual intensity, while decimal numbers are convenient when combining filter functions with calculated values.

Using the filter Property

The most common use of saturate() is with the CSS filter property.

The filter is applied to the rendered element, including its contents.

For example:

.photo {
  filter: saturate(150%);
}

This increases the saturation of an image to a multiplier of 150%.

The function also works on HTML elements other than images.

.card {
  filter: saturate(50%);
}

If the card contains text, backgrounds, icons, and images, their combined rendered appearance is desaturated.

This differs from changing an individual background-color or color declaration. The filter affects the rendered element rather than changing the source color values.

To adjust only an image within a card, apply the filter directly to the image:

.card img {
  filter: saturate(50%);
}

The surrounding card text and other content remain unaffected.

Using backdrop-filter

The backdrop-filter property can use saturate() to adjust the colors of content visible behind an element.

Unlike filter, which changes the rendered element itself, backdrop-filter changes the backdrop seen through the element.

For example:

.overlay {
  background-color: rgb(255 255 255 / 30%);
  backdrop-filter: saturate(200%);
}

This creates a translucent overlay that increases the saturation of the visible backdrop.

A partially transparent background allows the adjusted backdrop to remain visible.

For example, a card placed over a colorful background can use the following styles:

.glass-card {
  padding: 20px;
  background-color: rgb(255 255 255 / 25%);
  backdrop-filter: saturate(180%) blur(8px);
}

The backdrop becomes more saturated and blurred, while the card's own text is not directly filtered by these backdrop effects.

Browser support for backdrop-filter should be checked separately from support for saturate() with the filter property.

Combining Filter Functions

Multiple filter functions can be combined in one filter declaration.

Each function is applied in the order written.

Saturation and Brightness

The following example increases both saturation and brightness:

.photo {
  filter: saturate(150%) brightness(110%);
}

The saturation adjustment is applied first, followed by the brightness adjustment.

Saturation and Contrast

The following example combines saturation with contrast:

.photo {
  filter: saturate(140%) contrast(115%);
}

This makes the colors more vivid while increasing the difference between lighter and darker areas.

Saturation and Blur

The following example reduces saturation and applies a blur:

.photo {
  filter: saturate(50%) blur(3px);
}

The image appears more muted and less sharply defined.

Saturation and Hue Rotation

The following example changes both color intensity and hue:

.photo {
  filter: saturate(180%) hue-rotate(45deg);
}

The saturation is increased before the hue rotation is applied.

Filter Order

The order of filter functions can change the final appearance.

.first {
  filter: saturate(200%) sepia(50%);
}
.second {
  filter: sepia(50%) saturate(200%);
}

These declarations may produce different results because each filter processes the output of the preceding function.

When combining several filters, test the final appearance rather than assuming the order is interchangeable.

saturate() vs. grayscale()

Both saturate() and grayscale() can reduce the amount of color visible in an element, but they use different parameters.

For example:

.image-one {
  filter: saturate(0);
}
.image-two {
  filter: grayscale(100%);
}

Both declarations remove visible color saturation, although the functions use different calculations and can produce slightly different results.

The grayscale() function is designed to remove color, while saturate() can either reduce or increase color intensity.

For increasing saturation beyond its original level, use saturate().

Example

The following example compares several saturation values using the same colorful graphic.

HTML:

<div class="saturation-demo">
  <div class="saturation-item">
    <div class="color-sample zero"></div>
    <p>0% - Grayscale</p>
  </div>
  <div class="saturation-item">
    <div class="color-sample half"></div>
    <p>50% - Muted</p>
  </div>
  <div class="saturation-item">
    <div class="color-sample normal"></div>
    <p>100% - Original</p>
  </div>
  <div class="saturation-item">
    <div class="color-sample vivid"></div>
    <p>200% - Vivid</p>
  </div>
</div>

CSS:

.saturation-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.saturation-item {
  width: 140px;
  text-align: center;
}
.color-sample {
  width: 140px;
  height: 100px;
  background: linear-gradient(135deg, #b65c70 0%, #e0b35e 35%, #56a6a0 70%, #7775bc 100%);
}
.zero {
  filter: saturate(0%);
}
.half {
  filter: saturate(50%);
}
.normal {
  filter: saturate(100%);
}
.vivid {
  filter: saturate(200%);
}

The first sample removes all saturation. The second reduces color intensity, the third preserves the original colors, and the fourth increases saturation.

The same graphic is used for all four samples so the differences are easier to compare.

Background Filter Example

The saturate() function can also adjust the appearance of a background seen through a translucent overlay.

HTML:

<div class="backdrop-demo">
  <div class="backdrop-panel">
    <p>Saturated backdrop</p>
  </div>
</div>

CSS:

.backdrop-demo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 20px;
  background: linear-gradient(120deg, #b65c70, #e0b35e, #56a6a0, #7775bc);
}
.backdrop-panel {
  padding: 20px 30px;
  background-color: rgb(255 255 255 / 25%);
  backdrop-filter: saturate(250%) blur(4px);
  color: #222;
}
.backdrop-panel p {
  margin: 0;
}

The translucent panel applies increased saturation and blur to the background visible behind it.

The text inside the panel is not directly altered by the backdrop filter.

Transitions and Animations

The saturate() function can be animated using CSS transitions and keyframe animations.

Hover Transition

The following example begins with a desaturated image and restores its original saturation when the pointer moves over it.

.photo {
  filter: saturate(30%);
  transition: filter 0.4s ease;
}
.photo:hover {
  filter: saturate(100%);
}

The filter value changes smoothly from 30% to 100% over 0.4 seconds.

Increasing Saturation on Hover

A similar transition can increase saturation beyond its original level.

.photo {
  filter: saturate(100%);
  transition: filter 0.3s ease;
}
.photo:hover {
  filter: saturate(180%);
}

This creates a color-intensity effect without changing the image file.

Keyframe Animation

The following animation changes saturation repeatedly:

@keyframes saturation-pulse {
  0%, 100% {
    filter: saturate(100%);
  }
  50% {
    filter: saturate(200%);
  }
}
.animated-image {
  animation: saturation-pulse 3s ease-in-out infinite;
}

The image gradually becomes more saturated, then returns to its original appearance.

Reduced Motion

Continuous visual changes can be distracting. Use prefers-reduced-motion to respect users who request reduced animation.

@media (prefers-reduced-motion: reduce) {
  .animated-image {
    animation: none;
  }
  .photo {
    transition: none;
  }
}

This removes the continuous saturation animation and the hover transition for users who prefer reduced motion.

Common Uses

The saturate() function is useful for adjusting the color intensity of images, graphics, and interface elements.

• Photographs: Reduce or increase color intensity without modifying the source image.
• Image galleries: Create muted thumbnails that become more colorful on hover.
• Decorative backgrounds: Adjust the intensity of colorful graphics and gradients.
• Cards and panels: Apply consistent saturation effects to rendered content.
• Hover effects: Highlight interactive images using transitions.
• Backdrop effects: Enhance colors visible through translucent interface elements.
• Animations: Create gradual changes in color intensity.
• Visual themes: Apply more subdued or vivid treatments to selected content.

For example, an image gallery can display muted thumbnails until they are hovered:

.gallery img {
  filter: saturate(40%);
  transition: filter 0.3s ease;
}
.gallery img:hover {
  filter: saturate(100%);
}

This draws attention to the image being hovered while leaving the original files unchanged.

For important interface elements, do not rely on saturation changes alone to communicate meaning. Labels, icons, and other visible indicators may be needed to make states understandable.

Limitations

The saturate() function has several requirements and behaviors to consider.

• The function accepts one optional number or percentage.
• Negative saturation values are invalid.
• The default value is 1, equivalent to 100%.
• Values above 100% are valid and increase saturation.
• Large values may produce little additional visible change once color channels reach their rendering limits.
• The function does not restore colors that are absent from a grayscale source image.
• It operates on rendered colors rather than changing the underlying image data or CSS color declarations.
• It does not perform the same calculation as changing the saturation component of an HSL color.
• Applying filter to a container also affects its rendered descendants.
• Multiple filter functions must be written within the same filter declaration to combine their effects.

For example, this is valid:

filter: saturate(150%);

The following is also valid:

filter: saturate();

The following is invalid because the amount is negative:

filter: saturate(-50%);

The following is invalid because saturate() accepts only one argument:

filter: saturate(50%, 150%);

The following is invalid because a length is not an accepted saturation value:

filter: saturate(20px);

Separate filter declarations do not accumulate:

.photo {
  filter: saturate(150%);
  filter: contrast(120%);
}

In this example, the second declaration replaces the first.

To combine the effects, write:

.photo {
  filter: saturate(150%) contrast(120%);
}

Also, remember that filters can change the perceived contrast between text and its background. Check readability when filtering elements that contain text or important controls.

Browser Support

The CSS saturate() function has Baseline Widely available browser support. It has been supported across major browsers since September 2016, including Chrome, Edge, Firefox, and Safari.

The function is widely supported when used with the filter property. Compatibility for backdrop-filter should be checked separately because it has a different browser support history.

For current compatibility information, visit Can I Use? for CSS filter effects.

Specifications

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

The specification defines the function's syntax, accepted values, default behavior, and RGB color transformation.

Related filter functions include brightness(), contrast(), grayscale(), hue-rotate(), and sepia().