VOOZH about

URL: https://www.geeksforgeeks.org/css/tailwind-css-filters-complete-reference/

⇱ Tailwind CSS Filters Complete Reference - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Tailwind CSS Filters Complete Reference

Last Updated : 23 Jul, 2025

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

FilterIt 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:

Output:

👁 Tailwind CSS Filters
Tailwind CSS Filters
Comment
Article Tags:
Article Tags: