Tailwind CSS Backdrop Saturate

The Backdrop Saturate utilities in Tailwind CSS are used to adjust the color saturation of an element's backdrop. They apply the CSS backdrop-filter: saturate() function to the area behind an element without directly changing its foreground content. In Tailwind CSS v4, backdrop saturation utilities can be applied directly without requiring a separate backdrop-filter class.

Backdrop Saturate Classes

backdrop-saturate-0: Removes all color saturation from the backdrop, making it grayscale.
backdrop-saturate-50: Reduces the backdrop saturation to 50%.
backdrop-saturate-100: Preserves the backdrop's normal saturation.
backdrop-saturate-150: Increases the backdrop saturation to 150%.
backdrop-saturate-200: Increases the backdrop saturation to 200%.

Syntax

<element class="backdrop-saturate-{amount}"></element>

Example:

HTML

<!--Driver Code Starts-->
<!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.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <title>Tailwind CSS Backdrop Saturate</title>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-8 text-center">

    <h1 class="text-3xl font-bold text-green-600 mb-4">
        GeeksforGeeks
    </h1>

    <h2 class="text-xl font-semibold mb-6">
        Tailwind CSS Backdrop Saturate
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">

        <!-- Saturation 0 -->
        <div class="relative overflow-hidden rounded-lg">
            <img
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80"
                alt="Colorful landscape"
                class="w-full h-64 object-cover"
            >
            <div class="absolute inset-0 flex items-center justify-center bg-white/30 backdrop-saturate-0">
                <span class="rounded bg-white/80 px-3 py-2 font-semibold">
                    Saturation 0%
                </span>
            </div>
        </div>

        <!-- Saturation 100 -->
        <div class="relative overflow-hidden rounded-lg">
            <img
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80"
                alt="Colorful landscape"
                class="w-full h-64 object-cover"
            >
            <div class="absolute inset-0 flex items-center justify-center bg-white/30 backdrop-saturate-100">
                <span class="rounded bg-white/80 px-3 py-2 font-semibold">
                    Saturation 100%
                </span>
            </div>
        </div>

        <!-- Saturation 200 -->
        <div class="relative overflow-hidden rounded-lg">
            <img
                src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=600&q=80"
                alt="Colorful landscape"
                class="w-full h-64 object-cover"
            >
            <div class="absolute inset-0 flex items-center justify-center bg-white/30 backdrop-saturate-200">
                <span class="rounded bg-white/80 px-3 py-2 font-semibold">
                    Saturation 200%
                </span>
            </div>
        </div>

    </div>

</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The example displays three images with translucent overlays. The first overlay removes backdrop saturation, the second preserves normal saturation, and the third increases saturation.

Tailwind CSS Backdrop Saturate

Backdrop Saturate Classes

Syntax

Explore