Tailwind CSS - Backdrop Grayscale

Previous
Quiz
Next

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

Tailwind CSS Backdrop Grayscale Classes

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

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

Functionality of Tailwind CSS Grayscale Classes

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

Tailwind CSS Backdrop Grayscale Classes Example

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

</html>
Print Page
Previous
Next