Last updated: 15 January 2026

Tailwind CSS Blur

Apply blur effects in Tailwind CSS with blur-sm to blur-3xl utilities. Covers backdrop blur, image blur, glassmorphism patterns, and responsive blur.

Interactive Blur Playground

Try each class live and inspect the CSS output.

Utility class
blur-sm
CSS output
filter: blur(4px);

The blur utilities in Tailwind CSS apply Gaussian blur effects to elements using the CSS filter property. You can blur images, backgrounds, overlays, and entire sections. Combined with backdrop-blur, you can create frosted glass (glassmorphism) effects that are everywhere in modern UI design.

How to Apply Blur in Tailwind

Tailwind offers a range of blur intensities:

  • blur-none - No blur (removes blur).
  • blur-sm - Subtle 4px blur.
  • blur - Standard 8px blur.
  • blur-md - Medium 12px blur.
  • blur-lg - Large 16px blur.
  • blur-xl - Extra large 24px blur.
  • blur-2xl - 40px blur.
  • blur-3xl - Heavy 64px blur.
HTML
1<img class="blur-none" src="photo.jpg" alt="No blur" />
2<img class="blur-sm" src="photo.jpg" alt="Small blur" />
3<img class="blur" src="photo.jpg" alt="Standard blur" />
4<img class="blur-lg" src="photo.jpg" alt="Large blur" />
5<img class="blur-xl" src="photo.jpg" alt="Extra large blur" />
blur-none
blur-sm
blur
blur-md
blur-lg
blur-xl

Backdrop Blur for Glassmorphism

The backdrop-blur utilities blur the content behind an element rather than the element itself. This is the foundation of glassmorphism design, which creates frosted-glass panels that let background content show through.

HTML
1<div class="relative h-64 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl overflow-hidden">
2  <div class="absolute inset-0 flex items-center justify-center">
3    <div class="backdrop-blur-md bg-white/30 rounded-xl p-8 shadow-lg border border-white/20">
4      <h3 class="text-white font-bold text-xl">Glassmorphism Card</h3>
5      <p class="text-white/80 mt-2 text-sm">This panel blurs the background behind it.</p>
6    </div>
7  </div>
8</div>

Glassmorphism Card

This panel blurs the background behind it.

The key ingredients for glassmorphism: backdrop-blur-md (or larger), a semi-transparent background like bg-white/30, and a subtle border like border-white/20.

Blurred Image Background

A common pattern is blurring an image to use it as a soft background:

HTML
1<div class="relative rounded-xl overflow-hidden h-48">
2  <div class="absolute inset-0 bg-gradient-to-br from-sky-400 to-indigo-600 blur-sm scale-105"></div>
3  <div class="relative flex items-center justify-center h-full">
4    <div class="text-center text-white">
5      <h2 class="text-3xl font-bold">Welcome Back</h2>
6      <p class="mt-2 text-white/80">Your dashboard awaits</p>
7    </div>
8  </div>
9</div>

Welcome Back

Your dashboard awaits

Use scale-105 or similar on the blurred layer to prevent transparent edges from showing.

Practical Pattern: Blurred Loading State

HTML
1<div class="relative max-w-sm">
2  <div class="blur-sm pointer-events-none">
3    <div class="bg-white p-6 rounded-xl shadow">
4      <h3 class="font-bold text-lg">Premium Content</h3>
5      <p class="text-gray-600 mt-2 text-sm">This exclusive article covers advanced Tailwind techniques that will transform your workflow...</p>
6      <p class="text-gray-600 mt-2 text-sm">Learn how to build production-ready components using utility-first patterns.</p>
7    </div>
8  </div>
9  <div class="absolute inset-0 flex items-center justify-center">
10    <button class="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:bg-blue-700">
11      Sign in to Read
12    </button>
13  </div>
14</div>

Premium Content

This exclusive article covers advanced Tailwind techniques that will transform your workflow...

Learn how to build production-ready components using utility-first patterns.

Blurring content behind a CTA is a widely used pattern for paywalls and gated content.

Practical Pattern: Frosted Navigation Bar

HTML
1<nav class="backdrop-blur-lg bg-white/70 border-b border-gray-200/50 px-6 py-3 flex items-center justify-between">
2  <span class="font-bold text-gray-900">Acme Inc</span>
3  <div class="flex space-x-6 text-sm text-gray-700">
4    <a href="#" class="hover:text-blue-600">Home</a>
5    <a href="#" class="hover:text-blue-600">Products</a>
6    <a href="#" class="hover:text-blue-600">About</a>
7    <a href="#" class="hover:text-blue-600">Contact</a>
8  </div>
9</nav>

This is the sticky nav pattern used by Apple, Linear, and many modern SaaS sites.

Hover and Transition Effects

Blur can be toggled on hover or animated with transitions:

HTML
1<div class="blur-sm hover:blur-none transition-all duration-300 cursor-pointer">
2  <div class="bg-gradient-to-r from-emerald-400 to-cyan-400 p-6 rounded-xl text-white font-medium">
3    Hover to reveal this content clearly
4  </div>
5</div>
Hover to reveal this content clearly

Responsive Blur

Apply different blur levels at different breakpoints:

HTML
1<div class="blur-lg md:blur-sm lg:blur-none">
2  <p>Blurry on mobile, slightly blurred on tablet, sharp on desktop.</p>
3</div>

Arbitrary Value Usage

Use bracket notation for precise blur values:

HTML
1<div class="blur-[2px]">Subtle custom blur</div>
2<div class="backdrop-blur-[20px]">Custom backdrop blur</div>

Tailwind Blur Class Table

ClassProperties
blur-nonefilter: blur(0);
blur-smfilter: blur(4px);
blurfilter: blur(8px);
blur-mdfilter: blur(12px);
blur-lgfilter: blur(16px);
blur-xlfilter: blur(24px);
blur-2xlfilter: blur(40px);
blur-3xlfilter: blur(64px);
backdrop-blur-nonebackdrop-filter: blur(0);
backdrop-blur-smbackdrop-filter: blur(4px);
backdrop-blurbackdrop-filter: blur(8px);
backdrop-blur-mdbackdrop-filter: blur(12px);
backdrop-blur-lgbackdrop-filter: blur(16px);
backdrop-blur-xlbackdrop-filter: blur(24px);
backdrop-blur-2xlbackdrop-filter: blur(40px);
backdrop-blur-3xlbackdrop-filter: blur(64px);

Worth Reading

Windframe Tailwind blocks

Windframe is an AI visual editor for rapidly building stunning web UIs & websites

Start building stunning web UIs & websites!

Build from scratch or select prebuilt tailwind templates
Learn more about Windframe