Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Blur

The blur property in CSS is used to apply a blur filter to elements, giving them a softened or out-of-focus appearance. Tailwind CSS provides utility classes to enable, manipulate, and customize blur effects with ease. With a variety of utilities available, developers can effortlessly implement blur filters at different levels of complexity.

Whether you're designing a frosted-glass effect or adding subtle aesthetics to your UI, Tailwind offers a wide range of blur utilities to suit your project’s requirements. In this comprehensive guide, you’ll learn how to use, customize, and apply Tailwind’s blur classes effectively.

ClassPropertiesExample
blur-nonefilter: ;<div className="blur-none"></div>
blur-smfilter: blur(4px);<div className="blur-sm"></div>
blurfilter: blur(8px);<div className="blur"></div>
blur-mdfilter: blur(12px);<div className="blur-md"></div>
blur-lgfilter: blur(16px);<div className="blur-lg"></div>
blur-xlfilter: blur(24px);<div className="blur-xl"></div>
blur-2xlfilter: blur(40px);<div className="blur-2xl"></div>
blur-3xlfilter: blur(64px);<div className="blur-3xl"></div>

Overview of Blur

Adding the Blur

Tailwind CSS makes it straightforward to define blur effects on elements. You can use prebuilt utility classes such as blur-sm, blur-md, blur-lg, and more to achieve varying levels of blur. These classes correspond to the blur radius applied to the element.

Here’s how you can blur an image efficiently using Tailwind:

This is a live editor. Play around with it!
export default function BlurComponent() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-sky-50">
      <img 
        className="blur-md rounded-lg" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac" 
        alt="Blurred Background"
      />
    </div>
  );
}

Removing the Blur

To remove a blur effect from an element, you simply use the blur-none utility. This resets or negates any blur applied previously.

This is a live editor. Play around with it!
export default function ResetBlur() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <img 
        className="blur-none rounded-lg" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac" 
        alt="Sharp Clear Image"
      />
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind leverages state variants like hover: and focus: to apply blur filters dynamically based on user actions.

Consider a scenario where you want an image to blur when hovered over:

This is a live editor. Play around with it!
export default function HoverBlur() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-800">
      <img 
        className="hover:blur-lg transition duration-300 rounded-lg" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac" 
        alt="Blur On Hover"
      />
    </div>
  );
}

Breakpoint Modifiers

Responsive design often requires elements to behave differently across screen sizes. Tailwind’s breakpoint modifiers let you control blur effects based on the viewport width.

For instance, blur the background image on smaller screens but keep it crisp on larger screens:

This is a live editor. Play around with it!
export default function ResponsiveBlur() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <img 
        className="sm:blur-lg lg:blur-none rounded-lg" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac" 
        alt="Responsive Blur"
      />
    </div>
  );
}

By using the sm: or lg: breakpoint modifiers, an image can toggle between utilities depending on the active viewport.

Custom Blur

Extending the Theme

Tailwind supports extending its utility classes via the theme configuration. This allows you to define custom blur levels and create personalized aesthetic effects for your project.

Here’s how you can add new blur levels in your Tailwind configuration file. Once added, you can refer to the new classes directly in your components:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function ExtendedBlur() {
  return (
    <div className="w-screen h-screen flex items-center justify-center bg-gray-100">
      <img 
        className="blur-xxs rounded-lg" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac" 
        alt="Customized Blur"
      />
    </div>
  );
}

Using Arbitrary Values

Tailwind offers support for arbitrary values, empowering you with granular control over the blur radius. By specifying custom pixel values directly in your classes, you can achieve highly specific blur effects.

Here’s how you can apply a blur using an arbitrary value:

This is a live editor. Play around with it!
export default function ArbitraryBlur() {
  return (
    <div className="w-screen h-screen flex items-center justify-center">
      <img 
        className="blur-[12px] rounded-lg" 
        src="https://images.unsplash.com/photo-1705909237050-7a7625b47fac" 
        alt="Arbitrary Blur"
      />
    </div>
  );
}

Real World Examples

Product Showcase with Hover Blur Effect

A product grid that applies blur effects when hovering over items, creating an engaging shopping experience.

This is a live editor. Play around with it!
export default function ProductShowcase() {
  const products = [
    {
      id: 1,
      name: "Premium Leather Backpack",
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather backpack"
    },
    {
      id: 2,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Black wireless headphones"
    },
    {
      id: 3,
      name: "Smart Watch",
      price: "$299.99",
      src: "https://images.unsplash.com/photo-1523275335684-37898b6baf30",
      alt: "Modern smartwatch"
    },
    {
      id: 4,
      name: "Mechanical Keyboard",
      price: "$159.99",
      src: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 5,
      name: "Camera Lens",
      price: "$899.99",
      src: "https://images.unsplash.com/photo-1516035069371-29a1b244cc32",
      alt: "Professional camera lens"
    },
    {
      id: 6,
      name: "Gaming Mouse",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527814050087-3793815479db",
      alt: "RGB gaming mouse"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-6 p-8">
      {products.map((product) => (
        <div key={product.id} className="group relative">
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-64 object-cover transition-all duration-300 group-hover:blur-sm"
          />
          <div className="absolute inset-0 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
            <h3 className="text-white text-xl font-bold">{product.name}</h3>
            <p className="text-white text-lg">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Testimonial Cards with Background Blur

Testimonial section featuring frosted glass effect using backdrop blur.

This is a live editor. Play around with it!
export default function TestimonialSection() {
  const testimonials = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO, TechCorp",
      comment: "Absolutely transformed our workflow!",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson avatar"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Lead Developer",
      comment: "Best decision we made for our team.",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chen avatar"
    },
    {
      id: 3,
      name: "Emily Rodriguez",
      role: "Product Manager",
      comment: "Incredible results in record time.",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Rodriguez avatar"
    },
    {
      id: 4,
      name: "David Kim",
      role: "UX Designer",
      comment: "Streamlined our entire process.",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Kim avatar"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Marketing Director",
      comment: "Exceeded all our expectations!",
      avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Lisa Thompson avatar"
    },
    {
      id: 6,
      name: "James Wilson",
      role: "CTO",
      comment: "Game-changing technology solution.",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "James Wilson avatar"
    }
  ];

  return (
    <div className="relative p-8 bg-gradient-to-r from-purple-500 to-pink-500">
      <div className="grid grid-cols-1 gap-6">
        {testimonials.map((testimonial) => (
          <div
            key={testimonial.id}
            className="bg-white/30 rounded-xl p-6 group"
          >
            <img
              src={testimonial.avatar}
              alt={testimonial.alt}
              className="blur-sm group-hover:blur-none w-16 h-16 rounded-full mb-4"
            />
            <h3 className="text-white font-bold text-lg">{testimonial.name}</h3>
            <p className="text-white/80 text-sm">{testimonial.role}</p>
            <p className="text-white mt-4">{testimonial.comment}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Team Member Cards with Blur Overlay

Team member showcase with blur effect on hover.

This is a live editor. Play around with it!
export default function TeamGrid() {
  const team = [
    {
      id: 1,
      name: "Alex Martinez",
      role: "Frontend Developer",
      src: "https://images.unsplash.com/photo-1539571696357-5a69c17a67c6",
      alt: "Alex Martinez profile"
    },
    {
      id: 2,
      name: "Sophie Taylor",
      role: "UX Researcher",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sophie Taylor profile"
    },
    {
      id: 3,
      name: "Marcus Johnson",
      role: "Backend Developer",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Marcus Johnson profile"
    },
    {
      id: 4,
      name: "Rachel Kim",
      role: "Product Designer",
      src: "https://images.unsplash.com/photo-1534528741775-53994a69daeb",
      alt: "Rachel Kim profile"
    },
    {
      id: 5,
      name: "Chris Wilson",
      role: "DevOps Engineer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Chris Wilson profile"
    },
    {
      id: 6,
      name: "Emma Davis",
      role: "Project Manager",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emma Davis profile"
    }
  ];

  return (
    <div className="grid grid-cols-1 gap-4 p-8 bg-gray-900">
      {team.map((member) => (
        <div key={member.id} className="relative group">
          <img
            src={member.src}
            alt={member.alt}
            className="w-full h-80 object-cover"
          />
          <div className="absolute inset-0 bg-black/50 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <div className="flex flex-col items-center justify-center h-full text-white">
              <h3 className="text-2xl font-bold">{member.name}</h3>
              <p className="text-lg text-white/80">{member.role}</p>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

Modal Overlay with Blur Background

A modal component that blurs the background content when active.

This is a live editor. Play around with it!
export default function ModalOverlay() {
  const backgroundItems = [
    {
      id: 1,
      title: "Project Management",
      src: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      alt: "Project management dashboard"
    },
    {
      id: 2,
      title: "Data Analytics",
      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f",
      alt: "Data analytics charts"
    },
    {
      id: 3,
      title: "Team Collaboration",
      src: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team meeting"
    },
    {
      id: 4,
      title: "Resource Planning",
      src: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      alt: "Resource planning board"
    },
    {
      id: 5,
      title: "Financial Reports",
      src: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c",
      alt: "Financial charts"
    },
    {
      id: 6,
      title: "Marketing Campaigns",
      src: "https://images.unsplash.com/photo-1432888622747-4eb9a8f2c1d5",
      alt: "Marketing statistics"
    }
  ];

  return (
    <div className="relative min-h-screen">
      <div className="grid grid-cols-1 gap-4 p-6 blur-sm">
        {backgroundItems.map((item) => (
          <div key={item.id} className="bg-white rounded-lg p-4 shadow-lg">
            <img
              src={item.src}
              alt={item.alt}
              className="w-full h-40 object-cover rounded-lg mb-4"
            />
            <h3 className="text-xl font-bold">{item.title}</h3>
          </div>
        ))}
      </div>
      
      <div className="fixed inset-0 flex items-center justify-center">
        <div className="bg-white rounded-xl p-8 shadow-2xl">
          <h2 className="text-2xl font-bold mb-4">Welcome Back!</h2>
          <input
            type="email"
            placeholder="Email"
            className="w-full p-2 border rounded mb-4"
          />
          <input
            type="password"
            placeholder="Password"
            className="w-full p-2 border rounded mb-4"
          />
          <button className="w-full bg-blue-500 text-white py-2 rounded">
            Sign In
          </button>
        </div>
      </div>
    </div>
  );
}

Image Gallery with Blur

An image gallery that uses blur effects for a smooth user experience.

This is a live editor. Play around with it!
export default function ImageGallery() {
  const gallery = [
    {
      id: 1,
      title: "Mountain Landscape",
      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4",
      alt: "Snow-capped mountains"
    },
    {
      id: 2,
      title: "Ocean Waves",
      src: "https://images.unsplash.com/photo-1505118380757-91f5f5632de0",
      alt: "Crashing ocean waves"
    },
    {
      id: 3,
      title: "Desert Sunset",
      src: "https://images.unsplash.com/photo-1509316785289-025f5b846b35",
      alt: "Desert sunset view"
    },
    {
      id: 4,
      title: "Forest Path",
      src: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e",
      alt: "Forest walking path"
    },
    {
      id: 5,
      title: "City Lights",
      src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df",
      alt: "Night city skyline"
    },
    {
      id: 6,
      title: "Northern Lights",
      src: "https://images.unsplash.com/photo-1483347756197-71ef80e95f73",
      alt: "Aurora Borealis"
    }
  ];

  return (
    <div className="p-8">
      <div className="grid grid-cols-2 gap-6">
        {gallery.map((image) => (
          <div key={image.id} className="relative overflow-hidden rounded-xl">
            <div className="absolute inset-0 bg-gray-200 animate-pulse blur-2xl" />
            <img
              src={image.src}
              alt={image.alt}
              className="relative w-full h-80 object-cover blur-sm hover:blur-none transition-opacity duration-500"
              onLoad={(e) => {
                e.target.classList.remove("opacity-0");
                e.target.classList.add("opacity-100");
              }}
            />
            <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/60 to-transparent">
              <h3 className="text-white text-xl font-bold">{image.title}</h3>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Dynamic Product Card Hover Effect

This example demonstrates a product card with a custom blur effect that reveals product details on hover.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductCard() {
  return (
    <div className="relative w-screen h-screen group">
      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black/60 
        opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      </div>
      
      <img
        src="https://images.unsplash.com/photo-1542291026-7eec264c27ff"
        alt="Product"
        className="w-full h-full object-cover group-hover:blur-product transition-all duration-300"
      />

      <div className="absolute bottom-0 p-6 translate-y-full group-hover:translate-y-0 
        transition-transform duration-300">
        <h3 className="text-white text-2xl font-bold">Limited Edition Sneakers</h3>
        <p className="text-gray-200 mt-2">$199.99</p>
      </div>
    </div>
  )
}

Custom Blur for Image Gallery Hover Effect

This example demonstrates a custom blur configuration for an interactive image gallery where hovering over images creates a dynamic blur transition effect.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ImageGallery() {
  const images = [
    { id: 1, url: 'https://images.unsplash.com/photo-1682687220742-aba13b6e50ba', title: 'Nature' },
    { id: 2, url: 'https://images.unsplash.com/photo-1520264834865-7effb972c224', title: 'Architecture' },
    { id: 3, url: 'https://images.unsplash.com/photo-1533104816931-20fa691ff6ca', title: 'Travel' },
  ];

  return (
    <div className="grid grid-cols-3 gap-4 p-8">
      {images.map((image) => (
        <div key={image.id} className="relative group">
          <img
            src={image.url}
            alt={image.title}
            className="w-full h-64 object-cover transition-all duration-300 group-hover:blur-intense"
          />
          <h3 className="absolute inset-0 flex items-center justify-center text-white opacity-0 group-hover:opacity-100 transition-opacity">
            {image.title}
          </h3>
        </div>
      ))}
    </div>
  );
}

Interactive Content Card with Layered Blur

This example demonstrates using multiple blur layers for an interactive content card with depth effect.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function LayeredBlurCard() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 p-8">
      <div className="group relative w-[400px] h-[300px] rounded-xl overflow-hidden">
        <div className="absolute inset-0">
          <img
            src="https://images.unsplash.com/photo-1682686581030-7fa4ea2b96c3"
            alt="Background"
            className="w-full h-full object-cover transition-all duration-500 group-hover:blur-heavy"
          />
        </div>
        
        <div className="absolute inset-0 bg-black/30 backdrop-blur-minimal" />
        
        <div className="absolute inset-0 flex flex-col justify-end p-6 space-y-3">
          <div className="bg-white/10 backdrop-blur-soft p-4 rounded-lg transform translate-y-full group-hover:translate-y-0 transition-transform duration-500">
            <h3 className="text-white text-xl font-semibold mb-2">
              Interactive Card
            </h3>
            <p className="text-white/90 text-sm">
              Hover to reveal content with layered blur effects creating depth and dimension
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

Using blur effects consistently across your project is crucial to maintaining a polished and uniform look. You should define a set of standard blur utilities and use them at pre-determined locations, such as overlays, modals, and background images.

It’s also essential to align blur utilities with your project’s color palette, typography, and spacing system. For instance, if you’re creating a frosted-glass effect for cards or pop-ups, ensure the blur matches the brand’s visual tone.

Build Responsive Design

Leverage Tailwind's responsive utilities to make blur effects adapt intuitively across various screen sizes. For large-screen desktops, you might use heavier blur intensities (blur-lg) to highlight essential focal points like modal dialogs. On smaller screens, reduce the blur level (blur-sm) or remove it entirely to prioritize information clarity and minimize visual distractions.

Combine breakpoint-specific utilities with hover states for more dynamic and interactive designs. For example, a blur-sm sm:hover:blur-md setup ensures that lighter blurs apply by default, but users experience enhanced visual feedback as screen sizes increase.

Accessibility Considerations

Enhance Readability and Navigability

When implementing blur in your designs, always consider how it impacts readability and navigability. Overwhelming blur levels can reduce clarity, making text or interactive elements harder to understand. Try to add a background over the blurred area to put text on. This will seperate the blur from the content and improve the readability.

This is a live editor. Play around with it!
export default function ReadabilityEnhancer() {  
  return (  
    <div className="relative h-screen flex items-center justify-center bg-gray-700">  
      <img  
        src="https://images.unsplash.com/photo-1677086813101-496781a0f327"  
        className="absolute inset-0 w-full h-full object-cover blur-lg"  
        alt="Blurred Background"  
      />  
      <div className="relative p-8 rounded-lg bg-white/80 backdrop-blur-md">  
        <h3 className="text-xl font-bold text-black">Readable Content</h3>  
        <p className="text-gray-700 mt-2">Blurs work best with high-contrast text.</p>  
      </div>  
    </div>  
  );  
}

Support Accessible Interactive Elements

Blur can be used to enhance the accessibility of interactive components by visually emphasizing active or hovered states. For example, applying hover-specific blur utilities (hover:blur-sm) or backdrop blur effects (backdrop-blur) draws user attention to key elements without distracting from the overall content.

This is a live editor. Play around with it!
export default function InteractiveFocus() {  
  return (  
    <div className="grid grid-cols-2 gap-8 p-8">  
      <div className="relative group">  
        <img  
          src="https://images.unsplash.com/photo-1677086813101-496781a0f327"  
          className="w-full h-48 object-cover rounded-md group-hover:blur-sm transition duration-300"  
          alt="Interactive Item"  
        />  
        <div className="absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition duration-300">  
          <p className="text-white text-lg font-semibold">Hovered Blur</p>  
        </div>  
      </div>  
    </div>  
  );  
}

Supporting both mouse-based interactivity and keyboard navigation ensures accessibility for all users. Ensure that when an element gains focus (focus:ring-2), blur effects enhance visibility for users without introducing unnecessary distractions.

As you design these interactions, test with screen readers and keyboard-only navigation tools to validate accessibility and usability for interactive components.

Overscroll BehaviorBrightness

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy