In this tutorial, I’m going to show you how-to blur your image using CSS3 filter property’s blur function. The blur function applies a Gaussian blur to the image.

The Results

Normal:

Blurred:

The HTML and CSS

The blur function uses pixels. The more pixels, the more of a blur will happen. If the value is 0px, no blur effect will be applied.

Here is the HTML you would use to blur the image:

<img src="image.jpg" class="blur" />

Here is the CSS you would use to blur the image:

img.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

You can also apply this effect when the image is hovered:

img.blur:hover {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

img.blur
{
filter: blur(2.5px);
-webkit-filter: blur(2.5px);
-moz-filter: blur(2.5px);
-o-filter: blur(2.5px);
-ms-filter: blur(2.5px);
}