LAST UPDATED: AUGUST 5, 2021
How to create a blurry background image with CSS
Blur backgrounds are loved by websites developers. A blur image background will enhance the web page's looks. With a blurred background, the user will easily differentiate other components on the page. Here we will learn to create blur background images with CSS.
Creating a blurry background image
The blurry background can be created using the CSS filter property. Add filter: blur to do so. Another CSS property to add blurred background images is backdrop-filter. Use backdrop-filter: blur to do so. But the backdrop-filter will not blur the whole background image instead it will blur the backdrop of foreground elements.
Example: Creating a blurry background image using a filter property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
body, html {
height: 100%;
}
.container {
position: relative;
background-image: url("https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627476216-101156.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
filter: blur(8px); /* Adding blur background image */
}
.text {
text-align: center;
position: absolute;
left : 30%;
top: 30%;
width: 50%;
background-color: rgba(256 , 256,256,0.5);
font-size: 30px;
}
</style>
</head>
<body>
<div class="container"></div>
<div class="text">
<h2> Blured background image </h2>
<p> We have use filtered property for it</p>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: Adding a blurred image with backdrop-filter
Here, we add backdrop-filter: blur( 5px) to blur the background of the element containing it. We have set the height to 100% whereas width to 50% of the parent container so that you can see the difference between both backgrounds.
Conclusion
In this tutorial, we have learned to add a blur background image with CSS. We used the filter property to make the entire background image blur. We can also use a backdrop filter to make only the specified regions blur.
