Tailwind CSS Backdrop Contrast

The backdrop contrast utilities in Tailwind CSS are used to adjust the contrast of the area behind an element, such as an image or background. These utilities use the CSS backdrop-filter property with the contrast() function to increase or decrease the contrast of the backdrop.

backdrop-contrast-0: Sets the backdrop contrast to 0, removing its contrast.
backdrop-contrast-50: Sets the backdrop contrast to 0.5.
backdrop-contrast-75: Sets the backdrop contrast to 0.75.
backdrop-contrast-100: Sets the backdrop contrast to 1, maintaining the normal contrast level.
backdrop-contrast-125: Sets the backdrop contrast to 1.25.
backdrop-contrast-150: Sets the backdrop contrast to 1.5.
backdrop-contrast-200: Sets the backdrop contrast to 2, increasing the contrast.

Tailwind CSS v4 also supports arbitrary values, such as backdrop-contrast-[1.8], for custom contrast levels.

Syntax

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

Here, {amount} represents the contrast multiplier applied to the backdrop.

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">
    <title>Tailwind CSS Backdrop Contrast</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-6">

    <h1 class="text-center text-3xl font-bold text-green-700 mb-4">
        Tailwind CSS Backdrop Contrast
    </h1>

    <p class="text-center mb-6">
        Example of different backdrop contrast levels.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

        <div>
            <div class="relative h-56 overflow-hidden rounded-lg">
                <img
                    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80"
                    alt="Mountain landscape"
                    class="absolute inset-0 w-full h-full object-cover"
                >
                <div class="absolute inset-0 flex items-center justify-center
                            bg-white/20 backdrop-contrast-0">
                    <span class="rounded bg-white/80 px-3 py-2 font-bold">
                        Contrast 0
                    </span>
                </div>
            </div>
            <p class="mt-2 text-center font-semibold">
                backdrop-contrast-0
            </p>
        </div>

        <div>
            <div class="relative h-56 overflow-hidden rounded-lg">
                <img
                    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80"
                    alt="Mountain landscape"
                    class="absolute inset-0 w-full h-full object-cover"
                >
                <div class="absolute inset-0 flex items-center justify-center
                            bg-white/20 backdrop-contrast-100">
                    <span class="rounded bg-white/80 px-3 py-2 font-bold">
                        Contrast 100
                    </span>
                </div>
            </div>
            <p class="mt-2 text-center font-semibold">
                backdrop-contrast-100
            </p>
        </div>

        <div>
            <div class="relative h-56 overflow-hidden rounded-lg">
                <img
                    src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=800&q=80"
                    alt="Mountain landscape"
                    class="absolute inset-0 w-full h-full object-cover"
                >
                <div class="absolute inset-0 flex items-center justify-center
                            bg-white/20 backdrop-contrast-200">
                    <span class="rounded bg-white/80 px-3 py-2 font-bold">
                        Contrast 200
                    </span>
                </div>
            </div>
            <p class="mt-2 text-center font-semibold">
                backdrop-contrast-200
            </p>
        </div>

    </div>
</body>

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

Output: The page displays three landscape images with translucent overlays. Each overlay applies a different backdrop contrast level: 0, 100, and 200.

Tailwind CSS Backdrop Contrast

Syntax

Explore