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
Convert an image into Blur using HTML and CSS
In general, blur is a visual effect that happens when the viewer cannot see the details of an object clearly. It creates a soft, out-of-focus appearance that can be used for artistic or functional purposes.
In HTML, we can apply the blur effect to elements on a webpage (such as images) using CSS properties. To do so, we use the filter property along with the blur() function. This function applies a Gaussian blur effect to the image element, which makes it softer and less defined.
Syntax
selector {
filter: blur(radius);
}
This function accepts a single parameter (radius) that specifies the radius of the blur effect in pixels. Higher values create stronger blur effects.
Example 1: Basic Image Blur
In the following example, we are applying a 3px blur effect to an image
<!DOCTYPE html>
<html>
<head>
<style>
.blurred-image {
filter: blur(3px);
width: 300px;
height: 200px;
display: block;
margin: 20px auto;
border-radius: 8px;
}
</style>
</head>
<body>
<img src="/images/logo.png" alt="Blurred image" class="blurred-image">
</body>
</html>
A blurred image with a soft, out-of-focus appearance appears on the page.
Example 2: Blurred Background with Text Overlay
Here, we create a blurred background image with text content placed on top
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.background-blur {
filter: blur(4px);
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 30px;
border-radius: 15px;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<img src="/images/computer_concepts_icon.svg" alt="Background" class="background-blur">
<div class="overlay-text">
<h2>Welcome to TutorialsPoint</h2>
<p>Learn programming with ease</p>
</div>
</div>
</body>
</html>
A blurred background image appears with a semi-transparent dark overlay containing white text centered on the page.
Example 3: Sharp Image on Blurred Background
This example demonstrates placing a sharp, focused image over a blurred background version
<!DOCTYPE html>
<html>
<head>
<style>
.image-showcase {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.blurred-bg {
filter: blur(5px);
width: 100%;
height: 100%;
object-fit: cover;
}
.sharp-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 250px;
border: 3px solid white;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="image-showcase">
<img src="/images/logo.png" alt="Blurred background" class="blurred-bg">
<img src="/images/logo.png" alt="Sharp foreground" class="sharp-image">
</div>
</body>
</html>
A sharp, focused image with a white border and shadow appears centered over a blurred version of the same image as background.
Conclusion
The CSS filter: blur() property is a powerful tool for creating visual effects. It's commonly used for background images, hover effects, and creating focus on specific content by blurring surrounding elements.
2K+ Views
