Tailwind CSS - Backdrop Contrast

Previous
Quiz
Next

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

Tailwind CSS Backdrop Contrast Classes

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

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

Functionality of Tailwind CSS Backdrop Contrast Classes

  • backdrop-contrast-*: Class is used to effectively adjust the backdrop contrast of an element. {*} here specifies the different contrast values that can be set as per the need.

Tailwind CSS Backdrop Contrast Classes Example

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

</html>
Print Page
Previous
Next