Tailwind CSS Filters

Tailwind provides utilities for applying CSS filters and backdrop filters to elements, allowing you to create sophisticated visual effects directly in your HTML.

Filters

Filters allow you to apply visual effects like blur(), brightness(), and grayscale() to images or entire containers. Tailwind's filter utilities are highly optimized and cover the full range of CSS filter functions, including the ability to use arbitrary values like blur-[2px] or CSS variables via brightness-(--my-light-level).

The following table shows common filters and use-cases:

Utility Group	Range / Options	Common Usage Example
`blur-{size}`	`none` to `3xl` (64px)	`blur-sm` for a subtle softening effect.
`brightness-{n}`	`0` (black) to `200` (double)	`hover:brightness-110` for interactive hover states.
`contrast-{n}`	`0` to `200`	`contrast-125` to increase legibility on images.
`grayscale`	`0` (off) or `grayscale` (on)	`grayscale hover:grayscale-0` for logo grids.
`drop-shadow-{size}`	`sm` to `2xl`	`drop-shadow-md` for transparent PNG shapes.
`sepia` / `invert`	`0` or `on`	`invert` to flip colors for Dark Mode icons.

Here's an example:

Backdrop Filters

Backdrop filters are applied to the area behind an element rather than the element itself. For the effect to be visible, the element must have some transparency (e.g., bg-white/30). This provides a massive range of options for depth, from subtle "glassmorphism" to heavy frosted-glass overlays.

Here are some common scenarios for backdrop filters:

Utility Group	Range / Options	Common Usage Example
`backdrop-blur-{size}`	`none` to `3xl`	`backdrop-blur-md` for "glass" navigation bars.
`backdrop-brightness`	`0` to `200`	`backdrop-brightness-50` for dark modal backdrops.
`backdrop-contrast`	`0` to `200`	Sharpening the background behind a text overlay.
`backdrop-opacity`	`0` to `100`	Toning down the intensity of the backdrop filter.
`backdrop-grayscale`	`0` or `on`	Muting background colors for focused UI modals.

The Frosted Glass Card Scenario

To create a modern frosted glass look, combine background opacity with a backdrop blur:

Put that div element inside a larger element with a background image, and you'll have yourself a slick "Glassmorphism" effect.

Examples

Here are some examples of Tailwind's filters and backdrop filters:

<!doctype html>
<title>Tailwind CSS Filter Example</title>
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-gray-100 p-8 space-y-12">

<div class="max-w-4xl mx-auto space-y-12">
    
    
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
      <div class="space-y-4">
        <h3 class="font-bold text-gray-700">Blur Effects</h3>
        <div class="flex gap-4">
          <img src="/pix/samples/22l.jpg" class="w-24 h-24 rounded-lg blur-sm object-cover" alt="blur-sm">
          <img src="/pix/samples/22l.jpg" class="w-24 h-24 rounded-lg blur-md object-cover" alt="blur-md">
          <img src="/pix/samples/22l.jpg" class="w-24 h-24 rounded-lg blur-xl object-cover" alt="blur-xl">
        </div>
      </div>
      <div class="space-y-4">
        <h3 class="font-bold text-gray-700">Grayscale & Sepia</h3>
        <div class="flex gap-4">
          <img src="/pix/samples/22l.jpg" class="w-24 h-24 rounded-lg grayscale object-cover" alt="grayscale">
          <img src="/pix/samples/22l.jpg" class="w-24 h-24 rounded-lg sepia object-cover" alt="sepia">
        </div>
      </div>
    </div>

<div class="h-64 bg-cover bg-center rounded-2xl flex items-center justify-center p-12 bg-[url('/pix/samples/22l.jpg')]">
      <div class="bg-white/30 backdrop-blur-lg border border-white/40 p-10 rounded-3xl shadow-2xl text-center">
        <h3 class="text-2xl font-black text-white drop-shadow-lg">GLASSMORPHISM</h3>
        <p class="text-white text-sm font-medium">backdrop-blur-lg</p>
      </div>
    </div>

</div>

</body>

View Output

Next, we'll see how to bring your site to life with Tailwind's transitions and animations utilities.