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.

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
<img class="blur-none" src="photo.jpg" alt="No blur" />
<img class="blur-sm" src="photo.jpg" alt="Small blur" />
<img class="blur" src="photo.jpg" alt="Standard blur" />
<img class="blur-lg" src="photo.jpg" alt="Large blur" />
<img class="blur-xl" src="photo.jpg" alt="Extra large blur" />

Preview

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

Preview

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

Preview

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

Preview

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

Preview

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
<div class="blur-sm hover:blur-none transition-all duration-300 cursor-pointer">
  <div class="bg-gradient-to-r from-emerald-400 to-cyan-400 p-6 rounded-xl text-white font-medium">
    Hover to reveal this content clearly
  </div>
</div>

Preview

Hover to reveal this content clearly

Responsive Blur

Apply different blur levels at different breakpoints:

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

Arbitrary Value Usage

Use bracket notation for precise blur values:

html
<div class="blur-[2px]">Subtle custom blur</div>
<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

Landing page

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