How to Make a Background Image Blur using CSS?

To make a background image blur in CSS we can use the filter property in combination with the blur() function. The blur() function takes the blur radius as an input parameter which can be specified in various CSS units such as px, em, rem, cm, etc.

A higher value of blur radius adds more blur effect to the image. The default value is 0 which represents the original image.

The following example adds a 5px blur effect to the background image:

Example:

.bg-img{
    background-image: url(images/cat.jpg);
    filter: blur(5px);
    -webkit-filter: blur(5px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

Here is one more example where we have placed the original image in the center of the blurred background image.

Example:

.bg-img{
    background-image: url(images/cat.jpg);
    filter: blur(5px);
    -webkit-filter: blur(5px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}
.img-container{
    width: 250px;
    height: 250px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.img-container img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}