saturate()

Syntax

filter: saturate(amount)

Parameters

Examples

img {
  filter: saturate(0);
}

.hero {
  filter: saturate(1.5);
}

<img class="saturate-150 hover:saturate-200 transition" src="photo.jpg" />

Browser Support

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

saturate-{value}: saturate-0, saturate-50, saturate-100, saturate-150, saturate-200

Related Functions

• linear-gradient()— The linear-gradient() function creates a gradient image transitioning between colors along a straight line.
• radial-gradient()— The radial-gradient() function creates a gradient image radiating from a center point outward in an elliptical or circular shape.
• conic-gradient()— The conic-gradient() function creates a gradient that sweeps around a center point, useful for pie charts and color wheels.
• repeating-linear-gradient()— The repeating-linear-gradient() function creates a repeating linear gradient pattern, tiling the color stops indefinitely.
• repeating-radial-gradient()— The repeating-radial-gradient() function creates a repeating radial gradient pattern, producing concentric rings or ellipses.
• repeating-conic-gradient()— The repeating-conic-gradient() function creates a repeating conic gradient pattern, useful for fan or starburst effects.

Frequently Asked Questions