CSS Blur- Complete Guide

CSS Filters are valuable property that helps us use effects on an image or background. Some of these filters are – Brightness, Contrast, Grayscale, Sepia, and many more. But we are going to discuss today as you guessed it is CSS blur.
It helps in making images and background blur

How Blur() works?

So, the way Blur() works in CSS is that it creates a Gaussian Smoothing which is based on Gaussian Function. It reduces image noise and detailing of an image.
The blur effect depends on the parameter that we pass in. We pass radius as a Parameter with units “px”, “rem”, “em”, “vw”, “vh” but not ‘percentages’. It doesn’t accept values like 5%, 12%… And Ideally, we should use only px and rem units to pass values.

In this blog, we are going to see the use of a blur() filter.

Filter: blur()

We are going to learn blur by building. Here are the steps that we are going to follow :

Creating a Basic HTML
Adding Style to HTML
1. Inserting a Background image
2. Adding Some text
3. Centering the image
4. Adding a hover effect
5. Applying the blur effect

Creating HTML Layout

<div class="bg-image">
  <div class="text">
    <h2>京都の夜</h2>
    <h3>(Night in Kyoto, Japan)</h3>
  </div>
</div>
<div>
  <p>Hover to unblur the image</p>
</div>
Code language: HTML, XML (xml)

Centering div in the body using CSS

Here we are using the flexbox method on <body> to center the <div>.

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center; 
}
Code language: CSS (css)

Styling the div with the class ‘bg-image’

Inserted a background image using background-image: url(“…”)
Giving Background size a cover property so that the background image can fill up the whole div.
Gave div a fixed height and width
Then the main thing giving blur effect using
filter : blur(2px);

.bg-image {
  background-image: url("https://images.unsplash.com/photo-1528360983277-13d401cdc186?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-size: cover;
  height: 250px;
  width: 400px;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: blur(4px);
}
Code language: CSS (css)

Removing blur effect on hovering on the image.

We are adding this effect to see how we can remove the blur filter.
In this case, the blur will be “0” on hover.

.bg-image:hover {
  filter: blur(0);
}
Code language: CSS (css)

Styling div with class ‘text’ to see if blur effect works with each element in div.

Here we gave a grayish effect to the background of the text
Set font color to white
Aligned text in the center
And given a width of 100%, which is equal to its div.

.text {
  background-color: rgb(0, 0, 0, 0.5);
  width: 100%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 20px;  
}
Code language: CSS (css)

Centering text in the div with class ‘bg-image’

Here we are following the flexbox method to center the text.

.bg-image {
  background-image: url("https://images.unsplash.com/photo-1528360983277-13d401cdc186?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 250px;
  width: 400px;
  border-radius: 25px;
  filter: blur(4px);
  /* Flex Box Method */
  display: flex;
  justify-content: center;
  align-items: center;
}
Code language: CSS (css)

After completing these steps you will end up with something like this.

See the Pen CSS Backdrop Blur by Sunny Shah (@sunnykr77) on CodePen.

Conclusion

In this blog, we learned about

Blur() filter follows Gaussian Smoothing to apply to the blur effect.
Blur takes radius as a parameter to apply blur effect
Ideal units are “px” and “rem” and “percentage” values don’t work.
If we apply blur effect on an HTML element like <div> in case, It will also apply to its child elements.