Tailwind CSS - Backdrop Invert

Previous
Quiz
Next

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

Tailwind CSS Backdrop Invert Classes

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

Class CSS Properties
backdrop-invert-0 filter: backdrop-invert(0);
backdrop-invert filter: backdrop-invert(100%);

Functionality of Tailwind CSS Backdrop Invert Classes

  • backdrop-invert-0: This class is used to remove backdrop-invert filter from an element.
  • backdrop-invert: This class is used to apply a backdrop-invert filter to an element.

Tailwind CSS Backdrop Invert Classes Example

The following example illustrate the different visibilities and utilities of Tailwind CSS Backdrop Invert 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 Invert 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-invert-0 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-invert-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-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-invert
            </div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next