Tailwind CSS: How to Create Blurred Background Image

Updated: June 28, 2022 By: Pennywise 3 comments

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.kindacode.com/wp-content/uploads/2022/06/hero-image-example.jpeg')] 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">KINDACODE.COM</span></h1>
        </div>
    </div>
</body>

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

Example 2

Screenshot:

The code:

<body>
    <div class="relative w-full h-screen">
        <div
            class="w-full h-full bg-[url('https://www.kindacode.com/wp-content/uploads/2022/06/night-sky.jpeg')] 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>

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

Further reading: