Tailwind CSS - Saturate

Modern Tailwind CSS: Saturate

The saturate utility applies a CSS filter that changes the color saturation of an element. It can be used to make colors more vibrant, or to desaturate them for a grayscale or muted effect.

Saturate Classes

Tailwind provides several preset saturation levels.

Class	CSS Filter Property
saturate-0	filter: saturate(0); (Grayscale)
saturate-50	filter: saturate(.5); (50% Saturation)
saturate-100	filter: saturate(1); (Normal Saturation)
saturate-150	filter: saturate(1.5); (150% Saturation)
saturate-200	filter: saturate(2); (200% Saturation)

Example: Adjusting Image Saturation

This example shows the same image with different saturation levels applied.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Saturate Example</title>
</head>
<body class="p-8 bg-slate-100">

  <h2 class="text-2xl font-bold mb-6 text-center">Image Saturation Levels</h2>

  <div class="grid grid-cols-2 md:grid-cols-5 gap-6">

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="Image" class="saturate-0 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-0</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="Image" class="saturate-50 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-50</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="Image" class="saturate-100 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-100 (Normal)</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="Image" class="saturate-150 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-150</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="Image" class="saturate-200 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-200</p>
    </div>

  </div>

</body>
</html>

Interactive Example: Hover Effect

A very common UI pattern is to have a grayscale image that reveals its color on hover. This is easily achieved by combining the saturate-0 utility with the hover:saturate-100 state variant.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Interactive Saturate</title>
</head>
<body class="p-8 bg-gray-900 flex justify-center items-center h-screen">

  <div class="group relative overflow-hidden rounded-lg">
    <img
      src="https://picsum.photos/id/237/600/400"
      alt="A dog"
      class="saturate-0 group-hover:saturate-100 transition-all duration-500 ease-in-out transform group-hover:scale-110"
    >
    <div class="absolute inset-0 bg-black/20"></div>
    <p class="absolute bottom-4 left-4 text-white font-bold text-xl drop-shadow-lg">
      Hover Me
    </p>
  </div>

</body>
</html>

Combining Filters and Arbitrary Values

You can combine saturate with other filter utilities like brightness or contrast. For custom values, use Tailwind’s arbitrary value syntax.

<!-- Combine multiple filters -->
<img src="..." class="saturate-150 brightness-125 ...">

<!-- Use an arbitrary saturation value -->
<img src="..." class="saturate-[.85] ...">