Tailwind CSS Filters Complete Reference Last Updated : 18 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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 contentTailwind CSS ClassDescriptionFilterIt sets the visual effect of an element.BlurIt is used to apply a blurred effect filter on the image.BrightnessIt sets the brightness of the image.ContrastIt sets the Contrast of the image.Drop ShadowIt applies a filter to the image to set the shadow of the image.GrayscaleIt applies a filter to the image to set the grayscale of the image.Hue RotateIt applies a filter to the image to set the hue rotation of the image.InvertIt sets the invert version of the color of the image.SaturateIt is used to super-saturate or desaturate the input image.SepiaIt applies a filter to the image to convert an image into a sepia image.Backdrop FilterIt enables the backdrop of any filter which is used by the filter.Backdrop BlurIt is used to apply a blurred effect filter to an element.Backdrop BrightnessIt sets the brightness of the image.Backdrop ContrastIt sets the Contrast of the image.Backdrop GrayscaleIt applies a filter to the image to set the grayscale of the image.Backdrop Hue RotateIt applies a filter to the image to set the hue rotation of the image.Backdrop InvertIt applies a filter to the image to set the invert of the color of the image.Backdrop OpacityIt applies a filter to the image to set the transparency of the image. Backdrop SaturateIt is used to super-saturate or desaturates the input image.Backdrop SepiaIt applies a filter to the image to convert an image into a sepia image.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> Output:Tailwind CSS Filters Comment More infoAdvertise with us Next Article Tailwind CSS Filters Complete Reference kartik Follow Improve Article Tags : Web Technologies CSS Similar Reads Tailwind CSS Layout Complete Reference Tailwind CSS is a utility-first CSS framework for rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. As we know there are many CSS frameworks but people always choose the fast and easy framework to learn and use in the proje 3 min read Tailwind CSS Flexbox Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. The CSS flexbox is a vital feature to develop the frontend, there are four directions available in CSS so in Tailwind CSS all the properties are covered as in class form. we had a 2 min read Tailwind CSS Grid Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Grid describes the number of properties that allow to design of the grid structure of the grid and control the placement of the grid.Tailwind CSS ClassDescriptionGrid 2 min read Tailwind CSS Alignment Complete Reference Tailwind CSS is basically a utility first CSS framework for rapid custom UI. Tailwind CSS Alignment controls how the flex and grid items are aligned along with the container for fast front-end development. suppose Tailwind CSS Justify Content controlling how flex and grid items are positioned along 2 min read Tailwind CSS Spacing Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Spacing utilities manage and control the elements of padding, element's margin, and space between child elements.Tailwind CSS ClassDescriptionPaddingIt creates space 1 min read Tailwind CSS Sizing Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Sizing that set the size of elements like setting element width, height, min-max width, and min-max height.Tailwind CSS ClassDescriptionWidthIt sets the width of the 1 min read Tailwind CSS Typography Complete Reference Tailwind is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Typography, In which all style, properties, and spacing are covered in this class. For ex. Font family has multiple fonts as backups, font size has set the font size of t 2 min read Tailwind CSS Backgrounds Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Background, In which all the properties are covered in this class. it is controlling the background portion of the page like a background Image that can set one or mo 2 min read Tailwind CSS Borders Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Border utility settings the radius, width, color, opacity, etc., of element's borders. all the properties covered as in this class form.Tailwind CSS ClassDescriptionB 2 min read Tailwind CSS Effects Complete Reference Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Effects control the effects on elements. that provide classes to apply effects on elements like box-shadow, opacity/transparency.Tailwind CSS ClassDescriptionBox Shad 1 min read Like