Tailwind CSS - Backdrop Hue Rotate

Previous
Quiz
Next

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

Tailwind CSS Backdrop Hue Rotate Classes

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

Class CSS Properties
backdrop-hue-rotate-0 filter: backdrop-hue-rotate(0deg);
backdrop-hue-rotate-15 filter: backdrop-hue-rotate(15deg);
backdrop-hue-rotate-30 filter: backdrop-hue-rotate(30deg);
backdrop-hue-rotate-60 filter: backdrop-hue-rotate(60deg);
backdrop-hue-rotate-90 filter: backdrop-hue-rotate(90deg);
backdrop-hue-rotate-180 filter: backdrop-hue-rotate(180deg);

Functionality of Tailwind CSS Backdrop Hue Rotate Classes

  • backdrop-hue-rotate-0: This class is used to remove backdrop hue rotate filter from an element.
  • backdrop-hue-rotate-15: This class is used to rotate backdrop hue to 15deg of an element.
  • backdrop-hue-rotate-30: This class is used to rotate backdrop hue to 30deg of an element.
  • backdrop-hue-rotate-60: This class is used to rotate backdrop hue to 60deg of an element.
  • backdrop-hue-rotate-90: This class is used to rotate backdrop hue to 90deg of an element.
  • backdrop-hue-rotate-180: This class is used to rotate backdrop hue to 180deg of an element.

Tailwind CSS Backdrop Hue Rotate Classes Example

The following example illustrates the different visibilities and utilities of Tailwind CSS Backdrop Hue Rotate 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 Hue Rotate 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-hue-rotate-30 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-15
            </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-hue-rotate-60 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-75
            </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-hue-rotate-90 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-100
            </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-hue-rotate-180 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-200
            </div>
        </div>
    </div>
</body>

</html>
Print Page
Previous
Next