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.