Tailwind CSS - Backdrop Saturate

Previous
Quiz
Next

Tailwind CSS Backdrop Saturate is a utility class used to apply a backdrop saturate filter to an element.

Tailwind CSS Backdrop Saturate Classes

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

Class CSS Properties
backdrop-saturate-0 filter: backdrop-saturate(0);
backdrop-saturate-50 filter: backdrop-saturate(.5);
backdrop-saturate-100 filter: backdrop-saturate(1);
backdrop-saturate-150 filter: backdrop-saturate(1.5);
backdrop-saturate-200 filter: backdrop-saturate(2);

Functionality of Tailwind CSS Backdrop Saturate Classes

  • backdrop saturate-*: This class is used to apply a backdrop saturated filter to an element. The {*} represents the saturation value, which can be adjusted as needed.

Tailwind CSS Backdrop Saturate Classes Example

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

</html>
Print Page
Previous
Next