Blurring the background is a popular design technique used to focus attention on foreground content, such as modals, popups, or login forms. CSS makes it easy to achieve a stylish blur effect using just a few lines of code.
In this blog, you’ll learn how to blur backgrounds using CSS, including full-page blurs, background images, and behind-element effects.
✅ Method 1: Blur Background Using backdrop-filter
The most modern and elegant way to blur what’s behind an element is with the backdrop-filter property.
🔹 HTML:
<div class="blur-container">
<div class="blur-box">
<h2>Login</h2>
</div>
</div>
🔹 CSS:
.blur-container {
background: url('background.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.blur-box {
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 10px;
color: #000;
}
Key properties:
backdrop-filter: blur(10px);applies the blur to the background behind the element.background: rgba(...)keeps the foreground semi-transparent.
✅ Works best with
position: absoluteor overlaid elements.
⚠️ Requires browser support (modern browsers only).
✅ Method 2: Blur a Background Image Directly
You can blur a background image directly using the filter property, often by placing it in a separate <div>.
🔹 HTML:
<div class="image-bg"></div>
<div class="content">Your content here</div>
🔹 CSS:
.image-bg {
background: url('background.jpg') no-repeat center center / cover;
filter: blur(8px);
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
padding: 50px;
color: white;
}
Result: A blurred full-screen background image with clear content on top.
✅ Method 3: Blur the Entire Page Background
To blur everything behind a specific overlay or modal:
body.blur-active::before {
content: "";
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
backdrop-filter: blur(5px);
z-index: 10;
}
Toggle the blur-active class on <body> when your popup/modal appears.
✨ Bonus: Tailwind CSS Blur
Tailwind CSS makes it simple:
<div class="backdrop-blur-md bg-white/30 p-8 rounded shadow">
Blurred Background Card
</div>
✅ Summary
| Technique | Method |
|---|---|
| Blur behind an element | backdrop-filter: blur() |
| Blur a background image directly | filter: blur() |
| Blur full page under overlay | Pseudo-element with backdrop-filter |
| Utility-based (Tailwind) | backdrop-blur-md, bg-opacity |
Conclusion
CSS offers elegant ways to create blurred backgrounds, whether you’re highlighting a popup or adding modern flair to a section. With backdrop-filter, filter: blur(), or utility frameworks like Tailwind, you can easily enhance focus and create visually appealing layouts.
