Tailwind CSS: How to Create Blurred Background Image
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:
- Tailwind CSS: How to place text over an image
- How to Create Toggleable Tabs with Tailwind CSS
- Tailwind CSS: How to Create a Back To Top Button
- Tailwind CSS: Expand a Text Input on Focus (without Javascript)
- How to Create Pill Buttons with Tailwind CSS
- Tailwind CSS: How to Create an Off-Canvas Side Menu
You can also check out our CSS category page for the latest tutorials and examples.
You May Also Like
ioppo]
Keep up the good work
Thanks, man