Tailwind CSS - Backdrop Saturate

Tailwind CSS - Backdrop Saturate

The backdrop-saturate utility applies a CSS backdrop filter to adjust the saturation of the area behind an element. It allows for creating vivid or desaturated effects on underlying content.

Available Classes

Tailwind provides a range of pre-configured classes for backdrop saturation, from 0 (grayscale) to 200 (doubled saturation).

Class	CSS Properties
backdrop-saturate-0	—tw-backdrop-saturate: saturate(0);
backdrop-saturate-50	—tw-backdrop-saturate: saturate(.5);
backdrop-saturate-100	—tw-backdrop-saturate: saturate(1);
backdrop-saturate-150	—tw-backdrop-saturate: saturate(1.5);
backdrop-saturate-200	—tw-backdrop-saturate: saturate(2);

Practical Example: Highlighting a Focused Card

Backdrop filters are excellent for creating focus effects. In this example, we’ll build a card that applies multiple backdrop filters on hover, including increasing the saturation of the background image to draw the user’s attention.

Note: For backdrop filters to be visible, the element’s background must be semi-transparent.

<div class="relative w-full h-96 bg-cover bg-center" style="background-image: url('/path/to/your/nature-image.jpg')">
  <div class="absolute inset-0 flex items-center justify-center p-4">
    <!-- Interactive Card -->
    <div class="w-80 h-48 rounded-2xl border border-white/20
                bg-black/10 text-white
                flex flex-col items-center justify-center text-center p-4
                transition-all duration-300 ease-in-out
                hover:bg-black/20 hover:backdrop-blur-sm hover:backdrop-saturate-150">
      <h3 class="text-2xl font-bold">Hover Me</h3>
      <p class="opacity-80">See the background come to life.</p>
    </div>
  </div>
</div>

Combining Filters & Arbitrary Values

The real power of Tailwind’s filters comes from chaining them. You can also use arbitrary values for fine-tuned control.

<div class="... backdrop-blur-md backdrop-saturate-150 backdrop-brightness-125">
  Chained filters for a custom effect.
</div>

<div class="... backdrop-saturate-[.85]">
  An arbitrary saturation value.
</div>

Browser Support & Performance

Backdrop filters are now widely supported in modern browsers, but it’s always good practice to check caniuse.com for the latest compatibility data. Be aware that complex filters can be performance-intensive and should be used thoughtfully.