Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Convert an image into Blur using HTML and CSS
In general, blur is a visual effect of human eye that happens when the viewer cannot be able to see the details of the object clearly.
In HTML, we can apply the blur effect to elements on 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
Following is the syntax of the filter property with blur() function −
filter: blur(radius);
This function accepts a single parameter (i.e. radius) that specifies the radius of the blur effect in pixels.
Example
In the following example, we are getting an image and adding a 3px blur effect to it −
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 75%;
width: 75%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
margin-bottom: 70px;
}
</style>
</head>
<body>
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="Beach image">
</body>
</html>
As we can see in the output, the image is blurred.
Example
Here, we made the image as a background image and added a 3px blur effect to it. In addition to that, we added text on top of the background image.
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
/*CSS of the Background image*/
img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
width: 100%;
}
/*CSS of the text*/
.text {
background-color: rgba(0, 0, 0, 0.6);
color: white;
font-family: Georgia, 'Times New Roman', Times, serif;
border: 3px solid whitesmoke;
border-radius: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="background-image">
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="Background image">
</div>
<div class="text">
<h3>Visakhapatnam: The city of destiny</h3>
</div>
</body>
</html>
Example
In the example below, we have placed the original image in the center of the blurred background image.
<html>
<head>
<title>Convert an image into Blur using HTML/CSS</title>
<style>
/*CSS of the Background image*/
.background-image img {
filter: blur(3px);
-webkit-filter: blur(3px);
height: 100%;
width: 100%;
}
/*CSS of the front image div*/
.front-image {
width: 600px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*CSS of front image*/
.front-image img {
width: 100%;
height: 100%;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="background-image">
<img src="https://www.tutorialspoint.com/images/computer_concepts_icon.svg" alt="Background image">
</div>
<div class="front-image">
<img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="beach image">
</div>
</body>
</html>
352 Views
