Tailwind CSS Backdrop Opacity - GeeksforGeeks

Tailwind CSS Backdrop Opacity

Last Updated : 3 Nov, 2026

The Backdrop Opacity utilities in Tailwind CSS are used to control the opacity of the backdrop filter effect applied to an element. They use the CSS backdrop-filter: opacity() function to adjust the opacity of the backdrop without changing the foreground content. In Tailwind CSS v4, these utilities can be used directly without requiring a separate backdrop-filter class.

Backdrop Opacity Classes

  • backdrop-opacity-0: Sets the opacity of the backdrop filter effect to 0.
  • backdrop-opacity-<number>: Sets the backdrop filter opacity using a numeric value, such as backdrop-opacity-25 or backdrop-opacity-100.
  • backdrop-opacity-[<value>]: Sets a custom opacity value.
  • backdrop-opacity-(<custom-property>): Uses a CSS custom property to set the backdrop opacity.

Note: Tailwind CSS supports numeric opacity values; they are not limited to increments of 5.

Syntax

<element class="backdrop-opacity-{number}">...</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 Opacity</title>
</head>
<!--Driver Code Ends-->

<body class="min-h-screen bg-gray-100 p-6 text-center">

    <h1 class="mb-2 text-3xl font-bold text-green-700">
        Tailwind CSS
    </h1>

    <p class="mb-6 text-lg font-semibold">
        Backdrop Opacity Example
    </p>

    <div class="relative mx-auto max-w-3xl overflow-hidden rounded-xl">
        <img
            src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
            alt="Mountain landscape"
            class="absolute inset-0 h-full w-full object-cover"
        >

        <div class="relative grid min-h-72 grid-cols-2 items-center gap-4 p-6">

            <div class="rounded-lg border-2 border-green-600 bg-white/30 p-6 backdrop-blur-sm backdrop-opacity-25">
                <h2 class="mb-2 text-xl font-bold">Opacity 25</h2>
                <p>backdrop-opacity-25</p>
            </div>

            <div class="rounded-lg border-2 border-green-600 bg-white/30 p-6 backdrop-blur-sm backdrop-opacity-100">
                <h2 class="mb-2 text-xl font-bold">Opacity 100</h2>
                <p>backdrop-opacity-100</p>
            </div>

        </div>
    </div>

</body>

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

<!--Driver Code Ends-->

Output: Two panels appear over a mountain landscape image. The first panel uses backdrop-opacity-25, while the second uses backdrop-opacity-100, demonstrating different backdrop opacity values.

Comment

Explore