Tailwind CSS - Filters


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.
Tailwind CSS - Brightness Brightness class used to apply a brightness filter to an element.
Tailwind CSS - Contrast Contrast Class is used to effectively adjust the contrast of an element.
Tailwind CSS - Drop Shadow Drop Shadow class used to apply a drop shadow filter to an element.
Tailwind CSS - Gray Scale Grayscale class is used to apply a Grayscale filter to an element.
Tailwind CSS - Hue Rotate Hue Rotate class is used to apply a Hue Rotate filter to an element.
Tailwind CSS - Invert Invert class is used to apply a Invert filter to an element.
Tailwind CSS - Saturate Saturate class is used to apply a Saturate filter to an element.
Tailwind CSS - Sepia Sepia class is used to apply a Sepia filter to an element.
Tailwind CSS - Backdrop Blur Backdrop Blur class is used to apply a Backdrop Blur filter to an element.
Tailwind CSS - Backdrop Brightness Backdrop Brightness class is used to apply a Backdrop Brightness filter to an element.
Tailwind CSS - Backdrop Contrast Backdrop Contrast class is used to apply a backdrop Contrast filter to an element.
Tailwind CSS - Backdrop Grayscale Backdrop Grayscale class is used to apply a Backdrop Grayscale filter to an element.
Tailwind CSS - Backdrop Hue Rotate Backdrop Hue Rotate class is used to apply a Backdrop Hue Rotate filter to an element.
Tailwind CSS - Backdrop Invert Backdrop Invert class id used to apply a Backdrop Invert filter to an element.
Tailwind CSS - Backdrop Opacity Backdrop Opacity class is used to apply backdrop opacity filter to an element.
Tailwind CSS - Backdrop Saturate Backdrop Saturate class is used to apply a Backdrop Saturate filter to an element.
Tailwind CSS - Backdrop Sepia Backdrop Sepia class is used to apply a Backdrop Sepia filter to an element.

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>