Tailwind CSS Blur

The blur utilities in Tailwind CSS are used to apply a blur effect to elements such as images, text, and containers. These utilities use the CSS filter: blur() function to control the intensity of the blur effect.

blur-none: Removes the blur effect.
blur-xs: Applies a small blur effect of 4px.
blur-sm: Applies a blur effect of 8px.
blur-md: Applies a medium blur effect of 12px.
blur-lg: Applies a large blur effect of 16px.
blur-xl: Applies an extra-large blur effect of 24px.
blur-2xl: Applies a double extra-large blur effect of 40px.
blur-3xl: Applies a triple extra-large blur effect of 64px.
blur-[<value>]: Applies a custom blur value, such as blur-[5px].

Syntax

<element class="blur-{size}">...</element>

Example:

HTML

<!--Driver Code Starts-->
<!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 Class</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<!--Driver Code Ends-->

<body class="bg-gray-100 p-6 text-center">

    <h1 class="text-3xl font-bold text-green-600 mb-4">
        Tailwind CSS Blur Class
    </h1>

    <p class="mb-6 text-gray-700">
        Different blur effects applied to the same image.
    </p>

    <div class="mx-auto grid max-w-5xl grid-cols-2 gap-6 sm:grid-cols-4">
        <div>
            <img class="w-full rounded-lg blur-none"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape without blur">
            <p class="mt-2 font-medium">blur-none</p>
        </div>

        <div>
            <img class="w-full rounded-lg blur-xs"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with a small blur">
            <p class="mt-2 font-medium">blur-xs</p>
        </div>

        <div>
            <img class="w-full rounded-lg blur-md"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with a medium blur">
            <p class="mt-2 font-medium">blur-md</p>
        </div>

        <div>
            <img class="w-full rounded-lg blur-xl"
                 src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=400"
                 alt="Landscape with a strong blur">
            <p class="mt-2 font-medium">blur-xl</p>
        </div>
    </div>

</body>

<!--Driver Code Starts-->
</html>
<!--Driver Code Ends-->

Output: The page displays the same landscape image four times with different blur intensities. The first image remains clear, while the others become progressively blurrier.

Syntax

Explore