How to Blur a Background Image in CSS

In web applications, using background images is great approach to create an aesthetically sound web-page. Sometimes, it is required to blur the background image to focus on the content of the page. Moreover, it makes a web page look different from thousands of other web pages. CSS offers numerous functions to manipulate the background image.

This guide will cover how to blur a background image in CSS.

How to Blur a Background Image in CSS?

To make the background image blur in no time, we will use the “filter” CSS property. Utilizing the filter property will help us in blurring images efficiently.

So, let’s jump into the details.

What is filter Property in CSS?

In CSS, to place some graphical effects on HTML elements, “filter” property is used. For example, if you want to place some effects on an image, such as blur or contrast, you can use the filter property.

Syntax:

As filter property has a lot of values and if we elaborate a few like brightness() makes the elements bright or dark, opacity() plays with transparency, blur() make the HTML elements blur and none removes the effects if present.

So, let’s move ahead and understand deeply with an example that how can we make the background image blur in CSS.

Example

Here is a background image on our webpage, let’s make it blur.

In the HTML file, take a “<div>” element inside the “<body>“ tag.

HTML

Now, let’s head over to the CSS code:

Specify the “background” property with the value “url” and “no-repeat”. This will set the non-repeated background image.
Allocate an appropriate space to the image using “padding” property with a value “25%”.
In the next step, we will assign “filter” property a value “blur(9px)” to make the image look blurry. The value inside the blur(), “9px” allows controlling how much we want to blur the selected image like if we increase the value to 10px, it will make the image look blurrier. On the other hand, if we decrease the value to 6 or 7px, it will make the image look less blurry. Moreover, we can use the unit “rem” instead of px.

CSS

div {

background: url(trees.jpg) no-repeat;

padding: 25%;

filter: blur(9px);

}

Finally, save your code and open it in your browser to verify the working.

We have explained how to blur a background image in CSS easily.

Conclusion

To make the background image blur, utilize the CSS “filter” property with the value “blur()”. The value blur can be modified to control the blurring frequency of a specified image. You can set the value in px or rem to increase or decrease the blur effect on the image. This article is explaining how to blur a background image in CSS.

How to Blur a Background Image in CSS