CSS
CSS: How to Blur the Background (Like a Pro)
Blurring the background is a stylish design technique that adds depth and focus to the foreground content. It’s commonly used in modals, headers, cards, or even full-screen overlays to draw attention to specific UI elements.
In this post, you’ll learn:
- ✅ How to blur the background using CSS
- 🧪 Real examples with and without transparency
- 💡 Tips for cross-browser compatibility and performance
- 🧠 Best use cases for background blur
✅ Method 1: Blur an Entire Background Image with filter: blur()
This method blurs a background image or element using the CSS filter
property.
✅ HTML:
<div class="blur-background"></div>
✅ CSS:
.blur-background {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
filter: blur(8px);
}
🎯 This blurs the entire element including its contents (if any). Be cautious if you don’t want the text or child elements to blur.
✅ Method 2: Create a Glassmorphism Blur Effect (Foreground Over Blurred Background)
To blur only the background behind a foreground element (like a modal), use backdrop-filter
.
✅ HTML:
<div class="background"></div>
<div class="glass-box">
<h2>Focused Content</h2>
<p>This foreground has a blurred background!</p>
</div>
✅ CSS:
body, html {
margin: 0;
height: 100%;
background: url('background.jpg') no-repeat center center / cover;
}
.glass-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -30%);
width: 300px;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); /* for Safari */
border-radius: 10px;
color: #fff;
box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}
✅ This keeps your content clear and readable, while the area behind it becomes blurred.
🧠 What’s the Difference?
Property | Blurs the entire element? | Blurs the background only? |
---|---|---|
filter: blur() | ✅ Yes | ❌ No |
backdrop-filter | ❌ No | ✅ Yes |
📦 Browser Support
- ✅
filter: blur()
is widely supported - ✅
backdrop-filter
is supported in most modern browsers - ⚠️ Not fully supported in older versions of Safari or IE
- 🔒 May require enabling
background: rgba()
to show through
🧪 Example Use Cases
- 🪟 Modals and pop-ups
- 🧊 Frosted glass cards
- 📸 Hero sections with blurred overlays
- 🔳 Login screens with stylish blur
🧠 Performance Tips
- Avoid high blur values (
blur(20px)+
) on large areas—it may impact performance - Use
will-change: filter
for smoother animations if blurring dynamically - Keep your foreground readable—add contrast with overlays when needed
🧠 Summary
Task | Use This CSS |
---|---|
Blur whole element | filter: blur(8px); |
Blur background behind element | backdrop-filter: blur(); |
Add transparency | Use rgba() background |
Support older browsers | Include -webkit- prefix |
🏁 Final Thoughts
CSS gives you powerful, elegant tools for creating background blur effects. Whether you’re going for a modern glassmorphism look or adding subtle depth to your UI, using filter
and backdrop-filter
opens up endless creative possibilities.