Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to create a blurry background image with CSS?
A blurry background image creates an elegant overlay effect where content can be displayed over a softened background. This technique is commonly used for hero sections, modal overlays, and content cards to improve readability while maintaining visual appeal.
Syntax
selector {
background-image: url("image-path");
filter: blur(value);
background-size: cover;
background-position: center;
}
Method 1: Basic Blurred Background
The following example creates a blurred background image using the CSS filter property with the blur() function −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 400px;
width: 100%;
}
.blurred-bg {
background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg");
filter: blur(8px);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 10px;
text-align: center;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<div class="blurred-bg"></div>
<div class="content">
<h2>Welcome</h2>
<p>Content over blurred background</p>
</div>
</div>
</body>
</html>
A container with a blurred landscape background image and a centered white content box with "Welcome" heading and descriptive text appears on the page.
Method 2: Full Viewport Blurred Background
This method creates a full-screen blurred background with overlay text −
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
font-family: Arial, sans-serif;
}
.fullscreen-bg {
background-image: url("https://images.pexels.com/photos/1172207/pexels-photo-1172207.jpeg");
filter: blur(5px);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.overlay-text {
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 40px;
border-radius: 15px;
text-align: center;
border: 2px solid #fff;
}
</style>
</head>
<body>
<div class="fullscreen-bg"></div>
<div class="overlay-text">
<h1>John Developer</h1>
<p>Full Stack Web Developer</p>
</div>
</body>
</html>
A full-screen blurred background image with a centered dark overlay containing white text "John Developer" and "Full Stack Web Developer" with a white border.
Key Points
- The
filter: blur()property accepts values in pixels (e.g., blur(5px), blur(15px)) - Higher blur values create more pronounced blur effects
- Use
background-size: coverto ensure the image covers the entire container - Position content absolutely over the blurred background for overlay effects
Conclusion
Creating blurry background images with CSS is achieved using the filter: blur() property combined with proper background positioning. This technique enhances visual hierarchy and improves content readability over complex backgrounds.
Updated on: 2026-03-15T14:27:12+05:30
957 Views
Advertisements