Tailwind CSS - Backdrop Sepia

Previous
Quiz
Next

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

Tailwind CSS Backdrop Sepia Classes

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

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

Functionality of Tailwind CSS Backdrop Sepia Classes

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

Tailwind CSS Backdrop Sepia Classes Example

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

</html>
Print Page
Previous
Next
Advertisements