Tailwind CSS - Blur

Tailwind CSS: Applying Blur Effects

The blur utility in Tailwind CSS applies a blur filter to an element, creating a ‘frosted glass’ effect. This is commonly used for UI elements like modal backgrounds, image overlays, or headers that sit on top of other content.

Understanding the Blur Utilities

Tailwind provides a set of blur-{amount} classes that correspond to the CSS filter: blur(value); property. You can apply these classes to any element to control its blurriness.

Class	CSS Properties
blur-none	filter: blur(0);
blur-sm	filter: blur(4px);
blur	filter: blur(8px); (Default)
blur-md	filter: blur(12px);
blur-lg	filter: blur(16px);
blur-xl	filter: blur(24px);
blur-2xl	filter: blur(40px);
blur-3xl	filter: blur(64px);

Practical Application: Image Card with Blurred Overlay

A common use case for the blur utility is creating a text overlay on an image where the background behind the text is blurred to improve readability. Let’s build a responsive card component to demonstrate this.

Project Setup (Modern Workflow)

While you can use the Tailwind Play CDN for quick demos, real projects should use a modern build process with npm or yarn. This allows for full customization, performance optimizations like purging unused CSS, and a better developer experience.

# 1. Install Tailwind CSS and its peer dependencies
npm install -D tailwindcss postcss autoprefixer

# 2. Initialize Tailwind
npx tailwindcss init -p

This creates tailwind.config.js and postcss.config.js files.

Configuration and CSS

First, configure your template paths in tailwind.config.js to tell Tailwind where to scan for classes.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './*.{html,js}', // Scans all HTML and JS files in the root directory
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Next, add the Tailwind directives to your main CSS file.

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, run the Tailwind CLI to build your CSS.

# This command watches for changes and rebuilds your CSS automatically
npx tailwindcss -i ./input.css -o ./output.css --watch

Example: Building the Card

Link the generated output.css in your HTML and build the component. We’ll use a div with a background image, and an inner div will act as the blurred overlay.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS Blur Example</title>
    <link href="./output.css" rel="stylesheet">
    <style>
        /* For demonstration purposes, using an inline style for the background image */
        .card-bg {
            background-image: url('https://source.unsplash.com/random/800x600');
        }
    </style>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <div class="max-w-md w-full mx-auto">
    <h1 class="text-3xl font-bold text-center mb-6 text-gray-800">Modern Image Card</h1>

    <!-- Card Container -->
    <div class="relative rounded-lg overflow-hidden shadow-2xl h-80 bg-cover bg-center card-bg">

        <!-- Blurred Overlay with Content -->
        <div class="absolute inset-x-0 bottom-0 p-6">
            <!-- The ::before pseudo-element creates the blur effect -->
            <div class="relative p-6 bg-white bg-opacity-20 rounded-lg backdrop-blur-md shadow-lg">
                <h2 class="text-2xl font-bold text-white">Project Alpha</h2>
                <p class="mt-2 text-gray-200">An exploration of modern UI design using blurred backgrounds for enhanced readability and depth.</p>
            </div>
        </div>
    </div>

    <h2 class="text-2xl font-bold text-center mt-12 mb-6 text-gray-800">Blur Variations</h2>
    <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
        <!-- Example variations -->
        <div class="relative h-32 bg-cover bg-center card-bg rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-md">
            <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-sm"></div>
            <span class="relative">blur-sm</span>
        </div>
        <div class="relative h-32 bg-cover bg-center card-bg rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-md">
            <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-lg"></div>
            <span class="relative">blur-lg</span>
        </div>
        <div class="relative h-32 bg-cover bg-center card-bg rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-md">
            <!-- Apply blur on hover for an interactive effect -->
            <div class="absolute inset-0 bg-black bg-opacity-20 backdrop-blur-none hover:backdrop-blur-xl transition-all duration-300"></div>
            <span class="relative">Hover me (blur-xl)</span>
        </div>
    </div>

  </div>

</body>
</html>

Best Practices and Advanced Usage

• Performance: Applying blur filters can be computationally expensive. Use them judiciously, especially on large elements or animations. Test performance on lower-end devices.
• Accessibility: Ensure that text placed over a blurred background has sufficient contrast. The bg-opacity-* classes are helpful here to darken or lighten the blur layer.
• Backdrop Blur: The backdrop-blur-* utility is often what you really want. It blurs whatever is behind the element, not the element itself. Our example uses backdrop-blur as it’s the more common and practical choice for UI overlays.
• Responsive Blurring: Combine blur utilities with responsive prefixes to change the blur amount on different screen sizes (e.g., blur-md md:blur-lg).
• Customization: If the default blur values aren’t sufficient, you can add your own in the theme.extend.blur section of your tailwind.config.js file.