Blur Effect CSS
In this article, we will see How to add a blur effect to an image in CSS.
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