Tailwind CSS Filters Complete Reference

Last Updated : 07 Aug, 2023

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Filters applies graphical effects like filters, blur, brightness, contrast, drop shadow, etc. to an element. These classes are mostly used on image content

Tailwind CSS Class	Description	Example
Filter	It sets the visual effect of an element.	Try
Blur	It is used to apply a blurred effect filter on the image.	Try
Brightness	It sets the brightness of the image.	Try
Contrast	It sets the Contrast of the image.	Try
Drop Shadow	It applies a filter to the image to set the shadow of the image.	Try
Grayscale	It applies a filter to the image to set the grayscale of the image.	Try
Hue Rotate	It applies a filter to the image to set the hue rotation of the image.	Try
Invert	It sets the invert version of the color of the image.	Try
Saturate	It is used to super-saturate or desaturate the input image.	Try
Sepia	It applies a filter to the image to convert an image into a sepia image.	Try
Backdrop Filter	It enables the backdrop of any filter which is used by the filter.	Try
Backdrop Blur	It is used to apply a blurred effect filter to an element.	Try
Backdrop Brightness	It sets the brightness of the image.	Try
Backdrop Contrast	It sets the Contrast of the image.	Try
Backdrop Grayscale	It applies a filter to the image to set the grayscale of the image.	Try
Backdrop Hue Rotate	It applies a filter to the image to set the hue rotation of the image.	Try
Backdrop Invert	It applies a filter to the image to set the invert of the color of the image.	Try
Backdrop Opacity	It applies a filter to the image to set the transparency of the image.	Try
Backdrop Saturate	It is used to super-saturate or desaturates the input image.	Try
Backdrop Sepia	It applies a filter to the image to convert an image into a sepia image.	Try

Below example will give you a brief idea about the Filters of Tailwind CSS:

Example:

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
          rel="stylesheet"> 
</head> 
  
<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Filter Class</b> 
    <div class="grid grid-flow-col text-center p-4"> 
        <img class="rounded-lg filter brightness-50"
        src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
            alt="image"> 
        <img class="rounded-lg filter invert"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
            alt="image"> 
        <img class="rounded-lg filter blur-lg"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
            alt="image"> 
        <img class="rounded-lg filter contrast-125"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
            alt="image"> 
        <img class="rounded-lg filter grayscale"
            src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"
            alt="image"> 
          
    </div> 
</body> 
  
</html> 