How to Use background blur in Tailwind CSS

Tailwind CSS Background Blur Using Backdrop Blur

backdrop-blur is a CSS property in Tailwind CSS that applies a blur effect to the background behind an element, creating a frosted glass effect. This effect allows the content behind the element to be visible but blurred, making the foreground element stand out while still providing some context from the background.

The backdrop-blur property should be used when you want to create a semi-transparent overlay or modal effect, where the content behind the overlay or modal is still visible but blurred. This effect can be particularly useful in creating modern and visually appealing user interfaces, as it adds a sense of depth and dimension to the design.

Here are some common use cases for backdrop-blur in Tailwind CSS:

Modals and Overlays: When you want to display a modal or overlay on top of the existing content, backdrop-blur can create a frosted glass effect behind the modal or overlay, making it more visually appealing and drawing the user’s attention to the foreground content.

Blurred Headers or Navigation Bars: You can apply backdrop-blur to a header or navigation bar to create a sleek, modern look. This effect allows the content behind the header or navigation bar to be visible but blurred, creating a sense of depth and dimension.

Blurred Backgrounds: backdrop-blur can be used to create blurred backgrounds for hero sections, pricing tables, user profile cards, or other sections of your website or application. This effect can add visual interest and make the foreground content stand out more.

<div class="bg-white/50 backdrop-blur-sm">
 <!-- Your content here -->
</div>

Tailwind CSS provides different levels of blur intensity that you can apply:

backdrop-blur-none: No blur effect

backdrop-blur-sm: Small blur effect

backdrop-blur: Default blur effect

backdrop-blur-md: Medium blur effect

backdrop-blur-lg: Large blur effect

backdrop-blur-xl: Extra-large blur effect

backdrop-blur-2xl: 2x extra-large blur effect

backdrop-blur-3xl: 3x extra-large blur effect

Blurred Modal or Overlay

You can create a blurred modal or overlay effect by using backdrop-blur on a semi-transparent background element.

<!-- Modal overlay -->
<div class="fixed inset-0 flex items-center justify-center bg-black/60 backdrop-blur-lg">
    <!-- Modal content -->
    <div class="bg-white rounded-lg shadow-lg max-w-md mx-auto">
        <div class="p-6">
            <h2 class="text-2xl font-semibold mb-4">Modal Title</h2>
            <p class="text-gray-700 mb-6">Modal content goes here...</p>
            <div class="flex justify-end">
                <button
                    class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors duration-300">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

Learn more about backdrop-blur at tailwindcss.com docs

Tailwind CSS Background Blur Using Blur

The blur utilities in Tailwind CSS allow you to apply a blur filter directly to an element, similar to the backdrop-blur utility class but applied to the element itself instead of the background behind it. The blur utility applies a small blur effect directly to the element itself. It blurs the element’s contents, including text, images, or any other child elements. This utility is useful for creating blurred images, blurred text effects, or other situations where you want to blur the element itself.

You can adjust the blur intensity by changing the blur utility class:

blur-none: No blur effect

blur-sm: Small blur effect

blur: Default blur effect

blur-md: Medium blur effect

blur-lg: Large blur effect

blur-xl: Extra-large blur effect

blur-2xl: 2x extra-large blur effect

blur-3xl: 3x extra-large blur effect

Blurred Text

You can create a blurred text effect by applying a blur utility class to a text element.

<h1 class="text-4xl font-bold blur-md">Blurred Heading</h1>
<p class="blur-sm">Blurred paragraph text.</p>

Blurred Image

You can create a blurred image effect by applying a blur utility class to an img element.

<img
  src="https://cdn.pixabay.com/photo/2022/05/28/07/07/watermelon-7226708_640.png"
  alt="Blurred Image"
  class="blur-lg"
/>

Learn more about backdrop-blur at tailwindcss.com docs