Backdrop Filters

Filter what is behind an element to build glassmorphism effects like frosted navbars and cards.

4 min read Level 2/5 #tailwind#effects

What you'll learn

Use backdrop-blur and backdrop-brightness
Build a glass navbar or card
Know the performance and contrast caveats

Regular filters affect the element itself. Backdrop filters affect everything behind it — that is what produces the frosted-glass look.

The Core Recipe

A glass surface needs two things: a semi-transparent background, and a backdrop blur. Without the transparency there is nothing for the blur to show through:

<header class="sticky top-0 bg-white/30 backdrop-blur-md dark:bg-gray-900/40">
  <nav>…</nav>
</header>

A Glass Card

<div class="bg-white/20 backdrop-blur-lg backdrop-brightness-110 rounded-2xl border border-white/20 p-6">
  <h3 class="text-white font-semibold">Frosted card</h3>
</div>

backdrop-brightness-110 lifts the content behind it slightly so the glass reads as glass rather than fog.

Caveats

Performance — a large backdrop-blur over a scrolling area is expensive to repaint. Keep glass regions modest in size.
Contrast — text over a frosted backdrop can fail accessibility checks because the background is unpredictable. Verify your text still meets AA contrast over the busiest content that can scroll behind it.

Masks & Gradient Borders →