Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Filters

Quiz

Tailwind CSS Filters is used to apply CSS filters to elements directly on HTML code eliminating the need for custom CSS. Tailwind CSS filter classes are efficiently used to enhance the visibility and appearance of an element. It contains a list of classes such as blur, brightness, saturate, sepia, backdrop blur, backdrop sepia, and many more.

Tailwind CSS Filters Reference

Below mentioned topics can be used to apply an effective filter on elements.

Topic	Description	Example
Tailwind CSS - Blur	Blur class is used to apply a blur filter to an element.	Try It
Tailwind CSS - Brightness	Brightness class used to apply a brightness filter to an element.	Try It
Tailwind CSS - Contrast	Contrast Class is used to effectively adjust the contrast of an element.	Try It
Tailwind CSS - Drop Shadow	Drop Shadow class used to apply a drop shadow filter to an element.	Try It
Tailwind CSS - Gray Scale	Grayscale class is used to apply a Grayscale filter to an element.	Try It
Tailwind CSS - Hue Rotate	Hue Rotate class is used to apply a Hue Rotate filter to an element.	Try It
Tailwind CSS - Invert	Invert class is used to apply a Invert filter to an element.	Try It
Tailwind CSS - Saturate	Saturate class is used to apply a Saturate filter to an element.	Try It
Tailwind CSS - Sepia	Sepia class is used to apply a Sepia filter to an element.	Try It
Tailwind CSS - Backdrop Blur	Backdrop Blur class is used to apply a Backdrop Blur filter to an element.	Try It
Tailwind CSS - Backdrop Brightness	Backdrop Brightness class is used to apply a Backdrop Brightness filter to an element.	Try It
Tailwind CSS - Backdrop Contrast	Backdrop Contrast class is used to apply a backdrop Contrast filter to an element.	Try It
Tailwind CSS - Backdrop Grayscale	Backdrop Grayscale class is used to apply a Backdrop Grayscale filter to an element.	Try It
Tailwind CSS - Backdrop Hue Rotate	Backdrop Hue Rotate class is used to apply a Backdrop Hue Rotate filter to an element.	Try It
Tailwind CSS - Backdrop Invert	Backdrop Invert class id used to apply a Backdrop Invert filter to an element.	Try It
Tailwind CSS - Backdrop Opacity	Backdrop Opacity class is used to apply backdrop opacity filter to an element.	Try It
Tailwind CSS - Backdrop Saturate	Backdrop Saturate class is used to apply a Backdrop Saturate filter to an element.	Try It
Tailwind CSS - Backdrop Sepia	Backdrop Sepia class is used to apply a Backdrop Sepia filter to an element.	Try It

Example of Tailwind CSS Filters

In the following example we will cover some of the above mentioned Filters classes

Example 1

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Filters Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Blur-sm</h3>
            <img class="blur-sm w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-200</h3>
            <img class="brightness-200 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-150</h3>
            <img class="contrast-150 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Grayscale</h3>
            <img class="grayscale w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Hue-rotate-30</h3>
            <img class="hue-rotate-30 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Invert</h3>
            <img class="invert w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Saturate-50</h3>
            <img class="saturate-50 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Sepia</h3>
            <img class="sepia w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>
</html>

Example 2

<!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 Filters Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-fit w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-blur-sm absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-sm
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-brightness-0 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-brightness-0
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit 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-lime-100 py-12 text-center">
                Backdrop-contrast-50
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit 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 py-12 text-center">
                Backdrop-grayscale
            </div>
        </div>
    </div>
</body>
</html>

Print Page