Tailwind CSS Filters 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 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 Filter
- Tailwind CSS Blur
- Tailwind CSS Brightness
- Tailwind CSS Contrast
- Tailwind CSS Drop Shadow
- Tailwind CSS Grayscale
- Tailwind CSS Hue Rotate
- Tailwind CSS Invert
- Tailwind CSS Saturate
- Tailwind CSS Sepia
- Tailwind CSS Backdrop Filter
- Tailwind CSS Backdrop Blur
- Tailwind CSS Backdrop Brightness
- Tailwind CSS Backdrop Contrast
- Tailwind CSS Backdrop Grayscale
- Tailwind CSS Backdrop Hue Rotate
- Tailwind CSS Backdrop Invert
- Tailwind CSS Backdrop Opacity
- Tailwind CSS Backdrop Saturate
- Tailwind CSS Backdrop Sepia
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= alt="image"> <img class="rounded-lg filter invert" src= alt="image"> <img class="rounded-lg filter blur-lg" src= alt="image"> <img class="rounded-lg filter contrast-125" src= alt="image"> <img class="rounded-lg filter grayscale" src= alt="image"> </div> </body> </html> |
Output:
Tailwind CSS Filters
.png)
