• 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. 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:

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

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.

Leave a Reply