Blur Effect CSS
In this article, we will see How to add a blur effect to an image in CSS. To add the blur effect to your image or background image, we need to set the CSS “blurdrop-filter” property to “blur(px)”. You can also add these effects to the whole image or a particular place. This effect is very useful for adding text to the image and the text will display perfectly.
Step by Step to Add Blur Effect
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{
background: url(sas.jpg);
background-size: 800px ;
background-repeat: no-repeat;
background-position: center; }
.container{
width: 500px;
height: 100px;
margin: 200px auto; }
/* Blur effect*/
.blur{
background: linear-gradient(135deg,rgba(225,255, 255, 0.1), rgba(225,255, 255, 0));
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px; }
</style>
<body>
<div class="container blur"></div>
</body>
</html>
Output:
Steps:
- In the above code, we have created a <div> tag with classname “container” and “blur” inside the body section.
- In CSS, we select the body using an element selector and add a background image.
- Then we selected the classname “container” using the CSS class selector and set width/height/margin.
Select another <div> tag “blur” and use the “background” property to give value in linear-gradient() as in the above code. Then use the ” backdrop-filter” property and give the value as blur(10px). - See the above output, the center of the image is displayed blur
I hope you have understood a little about how to blur an image in CSS in this article. If you have any doubts about this then please comment below.