Tailwind CSS Filters — Blur, Brightness, Contrast, and Grayscale

DodaTech Updated 2026-06-28 6 min read

In this tutorial, you will learn about Tailwind CSS Filters. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS filter utilities apply visual effects to elements including blur (blur-), brightness (brightness-), contrast (contrast-), grayscale (grayscale), sepia (sepia), hue-rotate (hue-rotate-), and drop-shadow (drop-shadow-*).

What You'll Learn

You will learn how to apply and combine filter utilities, use backdrop filters for glass effects, animate filters on interaction, and create hover-based filter changes.

Why It Matters

Filters create visual depth without images. DodaTech uses filter utilities for image hover effects, modal backdrop blurs, loading placeholders, and Durga Antivirus Pro's threat level indicators.

Real-World Use

Doda Browser uses hover:brightness-110 for product card images, backdrop-blur-lg for modal overlays, grayscale for disabled avatars, and blur-sm for upcoming feature teasers.

flowchart LR
    A[Transforms] --> B[Filters]
    B --> C[Blur]
    B --> D[Brightness]
    B --> E[Grayscale]
    B --> F[Backdrop]
    B --> G[Drop Shadow]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Blur Filters

<div class="grid grid-cols-5 gap-4 p-8 max-w-xl mx-auto">
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-none"></div>
    <p class="text-xs mt-1">blur-none</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-sm"></div>
    <p class="text-xs mt-1">blur-sm</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur"></div>
    <p class="text-xs mt-1">blur</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-md"></div>
    <p class="text-xs mt-1">blur-md</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-lg"></div>
    <p class="text-xs mt-1">blur-lg</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-xl"></div>
    <p class="text-xs mt-1">blur-xl</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-2xl"></div>
    <p class="text-xs mt-1">blur-2xl</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-blue-500 rounded-lg blur-3xl"></div>
    <p class="text-xs mt-1">blur-3xl</p>
  </div>
</div>

Expected output: Eight blue squares with increasing blur levels from none to 3xl (64px blur radius).

Brightness and Contrast

<div class="grid grid-cols-5 gap-4 p-8 max-w-xl mx-auto">
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg brightness-50"></div>
    <p class="text-xs mt-1">brightness-50</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg brightness-75"></div>
    <p class="text-xs mt-1">brightness-75</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg brightness-100"></div>
    <p class="text-xs mt-1">brightness-100</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg brightness-125"></div>
    <p class="text-xs mt-1">brightness-125</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg brightness-150"></div>
    <p class="text-xs mt-1">brightness-150</p>
  </div>
</div>

<div class="grid grid-cols-5 gap-4 p-8 max-w-xl mx-auto">
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg contrast-50"></div>
    <p class="text-xs mt-1">contrast-50</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg contrast-100"></div>
    <p class="text-xs mt-1">contrast-100</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg contrast-125"></div>
    <p class="text-xs mt-1">contrast-125</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg contrast-150"></div>
    <p class="text-xs mt-1">contrast-150</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600 rounded-lg contrast-200"></div>
    <p class="text-xs mt-1">contrast-200</p>
  </div>
</div>

Expected output: Gradient squares showing brightness levels from dark (50) to bright (150) and contrast levels from low (50) to high (200).

Grayscale and Sepia

<div class="grid grid-cols-4 gap-6 p-8 max-w-lg mx-auto">
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-lg"></div>
    <p class="text-xs mt-1">Original</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-lg grayscale"></div>
    <p class="text-xs mt-1">grayscale</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-lg sepia"></div>
    <p class="text-xs mt-1">sepia</p>
  </div>
  <div class="text-center">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500 rounded-lg grayscale sepia"></div>
    <p class="text-xs mt-1">grayscale + sepia</p>
  </div>
</div>

Expected output: Four versions of the same gradient: original, grayscale (gray), sepia (brownish), and combined grayscale+sepia.

Hover Filter Effects

<div class="grid grid-cols-3 gap-6 p-8 max-w-lg mx-auto">
  <div class="group relative overflow-hidden rounded-lg cursor-pointer">
    <div class="w-full aspect-square bg-gradient-to-br from-blue-400 to-purple-600
                transition-all duration-300 group-hover:brightness-110 group-hover:contrast-125"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
      <span class="text-white font-bold text-lg">Bright + Contrast</span>
    </div>
  </div>

  <div class="group relative overflow-hidden rounded-lg cursor-pointer">
    <div class="w-full aspect-square bg-gradient-to-br from-green-400 to-teal-600 grayscale
                transition-all duration-300 group-hover:grayscale-0"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
      <span class="text-white font-bold text-lg">Color on hover</span>
    </div>
  </div>

  <div class="group relative overflow-hidden rounded-lg cursor-pointer">
    <div class="w-full aspect-square bg-gradient-to-br from-pink-400 to-rose-600 blur-sm
                transition-all duration-300 group-hover:blur-none"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
      <span class="text-white font-bold text-lg">Unblur on hover</span>
    </div>
  </div>
</div>

Expected output: Three image-like cards with hover effects: brightness increase, grayscale to color transition, and blur to sharp transition.

Backdrop Filters

<div class="relative h-64 bg-gradient-to-br from-blue-400 to-purple-600 rounded-xl overflow-hidden max-w-lg mx-auto">
  <!-- Background content -->
  <div class="absolute inset-0 flex items-center justify-center">
    <p class="text-white/30 text-6xl font-bold">BG</p>
  </div>

  <!-- Backdrop blur overlay -->
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="backdrop-blur-md bg-white/20 p-8 rounded-xl border border-white/30">
      <h3 class="text-white text-xl font-bold">Backdrop Blur</h3>
      <p class="text-white/80 text-sm mt-1">The background is blurred behind this glass panel.</p>
    </div>
  </div>
</div>

Expected output: A glass-morphism card with backdrop blur that blurs the gradient background behind the card.

Drop Shadow

<div class="grid grid-cols-4 gap-6 p-8 max-w-lg mx-auto">
  <div class="text-center">
    <div class="w-16 h-16 mx-auto bg-blue-500 rounded-lg drop-shadow-sm"></div>
    <p class="text-xs mt-1">drop-shadow-sm</p>
  </div>
  <div class="text-center">
    <div class="w-16 h-16 mx-auto bg-blue-500 rounded-lg drop-shadow"></div>
    <p class="text-xs mt-1">drop-shadow</p>
  </div>
  <div class="text-center">
    <div class="w-16 h-16 mx-auto bg-blue-500 rounded-lg drop-shadow-md"></div>
    <p class="text-xs mt-1">drop-shadow-md</p>
  </div>
  <div class="text-center">
    <div class="w-16 h-16 mx-auto bg-blue-500 rounded-lg drop-shadow-lg"></div>
    <p class="text-xs mt-1">drop-shadow-lg</p>
  </div>
  <div class="text-center">
    <div class="w-16 h-16 mx-auto bg-blue-500 rounded-lg drop-shadow-xl"></div>
    <p class="text-xs mt-1">drop-shadow-xl</p>
  </div>
  <div class="text-center">
    <div class="w-16 h-16 mx-auto bg-blue-500 rounded-lg drop-shadow-2xl"></div>
    <p class="text-xs mt-1">drop-shadow-2xl</p>
  </div>
</div>

Expected output: Blue squares with increasing drop-shadow intensity. Unlike box-shadow, drop-shadow follows the element's alpha channel.

Common Mistakes

1. Confusing Box Shadow and Drop Shadow

shadow-* uses box-shadow (rectangle). drop-shadow-* uses filter:drop-shadow (follows element shape including transparent parts).

2. Forgetting Backdrop Filter Requires a Background

Backdrop blur needs a semi-transparent background (bg-white/20) to show the glass effect. Pure backdrop-blur without background color does nothing visible.

3. Overusing Filters on Animations

Multiple filters (blur + brightness + contrast) on animated elements can impact performance. Use filters sparingly on moving elements.

4. Not Using Hover Filter Transitions

Filter changes without transitions are jarring. Add transition-all duration-300 for smooth filter changes.

5. Using grayscale Without grayscale-0 Option

Grayscale is 100 percent by default. Use grayscale-0 to restore color, or grayscale-50 for partial grayscale.

Practice Questions

What is the difference between blur and backdrop-blur? blur applies to the element itself. backdrop-blur blurs the background behind the element.
How do you make a grayscale image color on hover? grayscale hover:grayscale-0 transition-all duration-300.
What brightness value represents normal brightness? brightness-100 (100 percent). Values below 100 darken, above 100 brighten.
How do drop shadows differ from box shadows? Drop shadows follow the element's alpha channel (transparent areas). Box shadows follow the element's bounding box.
Can filters be combined? Yes: grayscale blur-sm brightness-110 applies all three filters simultaneously.

Challenge

Build an image gallery card with: grayscale default state, color on hover (grayscale-0), brightness increase (brightness-110), a backdrop-blur overlay with text, and drop-shadow hover effect.

FAQ

Are CSS filters supported in all browsers?

Yes. CSS filters are supported in all modern browsers. IE11 does not support filters.

Can filters be used with images?

Yes. Filters work on any element including img tags, SVGs, and video elements.

What is the performance impact of backdrop-filter?

Backdrop-filter can be computationally expensive. Use it sparingly and test on lower-end devices.

Can I animate filter values in keyframes?

Yes. Custom keyframes can include filter values: '50%': { filter: 'blur(4px)' }

How do I apply hue-rotate?

Use hue-rotate-15, hue-rotate-60, hue-rotate-180, etc. to rotate the color hue of an element.

Mini Project

Build an interactive image card with: grayscale default, hover:grayscale-0 with brightness and slight scale, a backdrop-blur glass panel overlay with product info, and drop-shadow for depth.

What's Next

Now master Form Styling for input, select, checkbox, and radio styling. Combine forms with filters and transforms for complete interactive components.

← Previous Tailwind CSS Transforms — Scale, Rotate, Translate, and Skew Next → Tailwind CSS Form Styling — Inputs, Selects, Checkboxes, and Radios

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Tailwind Css