CssHow-ToBeginner · 3 min read

How to Use Saturate Filter in CSS: Simple Guide

Use the filter: saturate(value); property in CSS to control the color intensity of an element. The value is a number where 1 means original colors, less than 1 reduces saturation, and greater than 1 increases it.

📐

Syntax

The saturate() filter takes one parameter: a number that sets the saturation level.

value: A number where 1 means no change.
Values less than 1 make colors less intense (more gray).
Values greater than 1 make colors more vivid.

css

selector {
  filter: saturate(value);
}

💻

Example

This example shows an image with normal saturation, reduced saturation, and increased saturation using the saturate() filter.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Saturate Filter Example</title>
<style>
  .normal {
    filter: saturate(1);
    width: 200px;
    margin: 10px;
  }
  .less-saturated {
    filter: saturate(0.3);
    width: 200px;
    margin: 10px;
  }
  .more-saturated {
    filter: saturate(2);
    width: 200px;
    margin: 10px;
  }
  .container {
    display: flex;
    gap: 10px;
  }
</style>
</head>
<body>
  <div class="container">
    <img src="https://via.placeholder.com/200x150.png?text=Normal" alt="Normal Saturation" class="normal" />
    <img src="https://via.placeholder.com/200x150.png?text=Less+Saturated" alt="Less Saturated" class="less-saturated" />
    <img src="https://via.placeholder.com/200x150.png?text=More+Saturated" alt="More Saturated" class="more-saturated" />
  </div>
</body>
</html>

Output

Three side-by-side images: the first with normal colors, the second with faded colors, and the third with very bright, vivid colors.

⚠️

Common Pitfalls

Common mistakes when using saturate() include:

Using values with units (wrong: 150%, correct: 1.5).
Expecting the filter to work on all elements; it mainly affects images, backgrounds, and colored content.
Not combining with filter properly if multiple filters are used (use space-separated filters).

css

/* Wrong: Using percentage units */
.element {
  filter: saturate(150%); /* This will not work */
}

/* Right: Use number without units */
.element {
  filter: saturate(1.5);
}

📊

Quick Reference

Remember these quick tips for saturate():

1 = original saturation
0 = completely gray (no color)
Values > 1 increase color intensity
Works well on images and colored elements
Combine with other filters by separating with spaces

✅

Key Takeaways

Use filter: saturate(value); with a number to adjust color intensity.

A value of 1 means no change; less than 1 reduces saturation; greater than 1 increases it.

Do not use units like % with saturate(); just use numbers.

The filter works best on images and elements with visible colors.

Combine multiple filters by listing them separated by spaces in the filter property.