0
0
Tailwindmarkup~5 mins

Backdrop blur (frosted glass) in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Backdrop blur creates a frosted glass effect by blurring the background behind an element. It helps make text or content stand out while keeping the background visible but soft.

To highlight text or buttons over a busy background image.
When you want a modern, stylish look on overlays or modals.
To improve readability on transparent panels.
For creating glass-like cards or sections on a webpage.
Syntax
Tailwind
class="backdrop-blur"

Use backdrop-blur to apply a default blur effect.

You can control blur strength with classes like backdrop-blur-sm, backdrop-blur-md, backdrop-blur-lg, etc.

Examples
This applies a default blur with a white background at 30% opacity for the frosted glass look.
Tailwind
<div class="backdrop-blur p-6 bg-white/30 rounded">Content</div>
A lighter blur with a semi-transparent black background.
Tailwind
<div class="backdrop-blur-sm bg-black/20 p-4 rounded">Small blur effect</div>
A stronger blur with a more opaque white background for a clearer frosted glass panel.
Tailwind
<div class="backdrop-blur-lg bg-white/40 p-8 rounded-lg">Strong blur effect</div>
Sample Program

This example shows a full page with a background image. The white panel uses backdrop-blur-md and a semi-transparent white background to create a frosted glass effect behind the text.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Backdrop Blur Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1470&q=80')] bg-cover bg-center min-h-screen flex items-center justify-center">
  <div class="backdrop-blur-md bg-white/30 rounded-xl p-10 max-w-sm text-center">
    <h1 class="text-3xl font-bold mb-4">Frosted Glass Effect</h1>
    <p class="text-gray-800">This panel uses backdrop blur to soften the background behind it, making the text easy to read.</p>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Backdrop blur works only if the element or its parent has some transparency (like bg-white/30).

Not all browsers support backdrop blur perfectly; modern browsers like Chrome, Firefox, Safari do.

Use contrast colors for text to keep it readable over the blurred background.

Summary

Backdrop blur creates a frosted glass look by blurring the background behind an element.

Use Tailwind classes like backdrop-blur with transparent backgrounds for the effect.

This effect helps text stand out on busy backgrounds while keeping a stylish look.