Tailwind CSS - Backdrop Blur

Creating Frosted Glass Effects with Backdrop Blur

The backdrop-blur utility in Tailwind CSS applies a backdrop-filter to an element, blurring anything visible behind it. This is perfect for creating modern “frosted glass” effects on UI elements like navigation bars, modals, and sidebars that overlay other content.

Backdrop Blur Utility Classes

Tailwind provides a range of backdrop-blur classes, from subtle to heavy, allowing you to fine-tune the intensity of the effect. You can also use arbitrary values for precise control.

Class	CSS Properties
backdrop-blur-none	backdrop-filter: blur(0);
backdrop-blur-sm	backdrop-filter: blur(4px);
backdrop-blur	backdrop-filter: blur(8px);
backdrop-blur-md	backdrop-filter: blur(12px);
backdrop-blur-lg	backdrop-filter: blur(16px);
backdrop-blur-xl	backdrop-filter: blur(24px);
backdrop-blur-2xl	backdrop-filter: blur(40px);
backdrop-blur-3xl	backdrop-filter: blur(64px);
backdrop-blur-[10px]	backdrop-filter: blur(10px); (Arbitrary value)

Practical Example: Frosted Card Overlay

Here’s a realistic example of a card overlaid on a background image. The card uses backdrop-blur along with a semi-transparent background color to create the frosted glass effect. The blur makes the text on the card highly readable while still showing the background image.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backdrop Blur Example</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="antialiased text-slate-50">
  <div class="relative flex items-center justify-center min-h-screen bg-slate-900">
    <!-- Background Image -->
    <div class="absolute inset-0 w-full h-full">
      <img src="https://placehold.co/1920x1080/475569/334155" alt="Abstract background" class="w-full h-full object-cover">
    </div>

    <!-- Frosted Glass Card -->
    <div class="relative w-full max-w-sm rounded-xl bg-white/10 p-8 shadow-2xl backdrop-blur-lg ring-1 ring-white/20">
      <h2 class="text-2xl font-bold">Welcome Back</h2>
      <p class="mt-2 text-slate-300">Sign in to continue to your dashboard.</p>
      <div class="mt-6">
        <label for="email" class="block text-sm font-medium text-slate-300">Email</label>
        <input id="email" type="email" class="mt-1 block w-full rounded-md border-white/20 bg-white/5 py-2 px-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-inset focus:ring-sky-400">
      </div>
      <div class="mt-4">
        <button class="w-full rounded-lg bg-sky-500 py-2.5 font-semibold hover:bg-sky-400 transition-colors">
          Sign In
        </button>
      </div>
    </div>
  </div>
</body>
</html>

Debugging and Important Considerations

• Requires Transparency: backdrop-blur only works on elements with a semi-transparent background color (e.g., bg-white/50 or an RGBA color). A fully opaque background will hide the blur effect entirely.
• Combining Filters: You can chain multiple backdrop filters together, such as backdrop-blur-md, backdrop-saturate-150, and backdrop-brightness-125, to create more complex effects.
• Browser Support: The backdrop-filter property is widely supported in modern browsers, but not universally. Always check caniuse.com for the latest support data and consider fallbacks for older browsers. A common fallback is to simply use a semi-opaque background color.
• Performance: Overusing heavy blur effects, especially on large or animated elements, can negatively impact rendering performance and battery life on some devices. Use it thoughtfully and test performance on target devices.