Tailwind CSS - Backdrop Opacity

Previous
Quiz
Next

Tailwind CSS Backdrop Opacity is a utility class used to apply a Backdrop Opacity filter to an element.

Tailwind CSS Backdrop Opacity Classes

The following is the list of Tailwind CSS Backdrop Opacity Classes that are used to effectively apply backdrop opacity filters.

Class CSS Properties
backdrop-opacity-0 backdrop-filter: opacity(0);
backdrop-opacity-5 backdrop-filter: opacity(0.05);
backdrop-opacity-10 backdrop-filter: opacity(0.1);
backdrop-opacity-15 backdrop-filter: opacity(0.15);
backdrop-opacity-20 backdrop-filter: opacity(0.2);
backdrop-opacity-25 backdrop-filter: opacity(0.25);
backdrop-opacity-30 backdrop-filter: opacity(0.3);
backdrop-opacity-35 backdrop-filter: opacity(0.35);
backdrop-opacity-40 backdrop-filter: opacity(0.4);
backdrop-opacity-45 backdrop-filter: opacity(0.45);
backdrop-opacity-50 backdrop-filter: opacity(0.5);
backdrop-opacity-55 backdrop-filter: opacity(0.55);
backdrop-opacity-60 backdrop-filter: opacity(0.6);
backdrop-opacity-65 backdrop-filter: opacity(0.65);
backdrop-opacity-70 backdrop-filter: opacity(0.7);
backdrop-opacity-75 backdrop-filter: opacity(0.75);
backdrop-opacity-80 backdrop-filter: opacity(0.8);
backdrop-opacity-85 backdrop-filter: opacity(0.85);
backdrop-opacity-90 backdrop-filter: opacity(0.9);
backdrop-opacity-95 backdrop-filter: opacity(0.95);
backdrop-opacity-100 backdrop-filter: opacity(1);

Functionality of Tailwind CSS Backdrop Opacity Classes

  • backdrop-opacity-*: This class is used to apply a backdrop opacity filter to an element. {*} here represents the value of backdrop opacity that can be set as per the need.

Tailwind CSS Backdrop Opacity Classes Example

The following example illustrates the different visibilities and utilities of Tailwind CSS Backdrop Opacity classes.

Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Backdrop Opacity Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-opacity-10 backdrop-invert 
                        absolute w-36 h-36 text-center
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12">
                Backdrop-opacity-0
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-opacity-30 backdrop-invert 
                        absolute w-36 h-36 left-4 
                        border-2 border-green-500 top-4
                        text-red-600 font-bold py-12 text-center">
                Backdrop-opacity-30
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-opacity-80 backdrop-invert absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-opacity-80
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-opacity-100 backdrop-invert absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-opacity-100
            </div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next