Tailwind CSS Backdrop Filter - GeeksforGeeks

Tailwind CSS Backdrop Filter

Last Updated : 3 Nov, 2026

The backdrop filter utilities in Tailwind CSS are used to apply graphical effects, such as blur, brightness, contrast, and grayscale, to the area behind an element. Unlike the regular filter utilities, which affect the element itself, backdrop filters affect its backdrop.

Backdrop Filter Classes

  • backdrop-filter-none: Removes all backdrop filter effects from an element.
  • backdrop-filter-[<value>]: Applies a custom CSS backdrop-filter value.
  • backdrop-filter-(<custom-property>): Uses a CSS custom property to define the backdrop filter.

You can also combine effect-specific utilities, such as backdrop-blur-xs, backdrop-invert, and backdrop-grayscale, to apply multiple effects to the backdrop.

Note: In Tailwind CSS v4, backdrop filter utilities can be applied directly without using a separate backdrop-filter class.

Syntax

<element class="backdrop-blur-xs backdrop-grayscale">...</element>

To remove all backdrop filter effects, use:

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

<body class="min-h-screen bg-slate-100 p-6 text-center">
    <h1 class="mb-2 text-3xl font-bold text-green-700">
        Tailwind CSS
    </h1>
    <h2 class="mb-6 text-xl font-semibold">
        Backdrop Filter Example
    </h2>
    <div class="mx-auto grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-3">
        <div class="relative h-56 overflow-hidden rounded-xl">
            <img
                src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=600&q=80"
                alt="Mountain landscape"
                class="absolute inset-0 h-full w-full object-cover"
            >
            <div class="absolute inset-0 flex items-center justify-center bg-white/20 backdrop-blur-sm">
                <p class="rounded-lg bg-white/70 px-4 py-2 font-semibold">
                    Blur
                </p>
            </div>
        </div>
        <div class="relative h-56 overflow-hidden rounded-xl">
            <img
                src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=600&q=80"
                alt="Mountain landscape"
                class="absolute inset-0 h-full w-full object-cover"
            >
            <div class="absolute inset-0 flex items-center justify-center bg-white/20 backdrop-grayscale">
                <p class="rounded-lg bg-white/70 px-4 py-2 font-semibold">
                    Grayscale
                </p>
            </div>
        </div>
        <div class="relative h-56 overflow-hidden rounded-xl">
            <img
                src="https://images.unsplash.com/photo-1470770841072-f978cf4d019e?auto=format&fit=crop&w=600&q=80"
                alt="Mountain landscape"
                class="absolute inset-0 h-full w-full object-cover"
            >
            <div class="absolute inset-0 flex items-center justify-center bg-white/20 backdrop-invert">
                <p class="rounded-lg bg-white/70 px-4 py-2 font-semibold">
                    Invert
                </p>
            </div>
        </div>
    </div>
</body>

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

Output: The example displays three landscape images with different backdrop effects: blur, grayscale, and invert.

Comment

Explore