• Post category:CSS

How to Add a Blur Effect to an Image in CSS

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:

blur effect css

 

Steps:

  1. In the above code, we have created a <div> tag with classname “container” and “blur” inside the body section.
  2. In CSS, we select the body using an element selector and add a background image.
  3. 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).
  4. See the above output, the center of the image is displayed blur
READ ALSO  Background Image opacity Without Affecting Text in CSS

Leave a Reply