Tailwind CSS: How to Create Blurred Background Image

Updated: December 7, 2023 By: Khue Post a comment

In web development, the blurred background image effect is a popular design technique where an image used as a background is intentionally blurred. This creates a soft, out-of-focus backdrop that can make overlaid content (like text or other elements) stand out more clearly. This effect is often used to add visual interest and depth to a webpage without overwhelming the main content.

The two examples below show you two different ways to create blurry background images with Tailwind CSS.

Example 1

Screenshot:

The code:

<body>
    <div
        class="w-full h-screen bg-[url('https://www.slingacademy.com/wp-content/uploads/2022/10/hero-image-example.webp')] bg-cover bg-center">
        <div class="w-full h-full flex flex-col justify-center items-center backdrop-blur-lg">
            <h3 class="text-2xl text-orange-400">HI THERE</h3>
            <h1 class="mt-5 text-center text-4xl text-white font-semibold drop-shadow-lg">WELCOME TO
                <span class="text-yellow-300">SLING ACADEMY</span>
            </h1>
        </div>
    </div>
</body>

We use the backdrop-blur-* utility class to create the blur effect.

Example 2

Screenshot:

The full source code (including HTML boilerplate):

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Sling Academy</title>
</head>

<body>
    <div class="relative w-full h-screen">
        <div
            class="w-full h-full bg-[url('https://www.slingacademy.com/wp-content/uploads/2022/10/night-sky.webp')] bg-cover bg-center blur-md">
        </div>
        <div
            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col justify-center items-center backdrop-blur-lg">
            <h1 class="mt-5 text-center text-7xl text-white font-semibold drop-shadow-lg">
                Hello There
            </h1>
        </div>
    </div>
</body>

</html>

We use the blur-* utility class to make the blur effect.