Cross-browser Image Blur

In this article I’ll show how to blur photographs using CSS and SVG in modern browsers, with the usual caveats: the techniques I’ll demonstrate will work on all recent versions of Chrome, Firefox and Internet Explorer, but not (as yet) Safari or Opera. On the upside, CSS filters are hardware accelerated in Chrome, making them ready for transition and animation effects, and Internet Explorer 10 is dropping proprietary DX filters in exchange for W3C standards.

blur is similar to the Gaussian Blur filter in PhotoShop; its inclusion in CSS3 and SVG means we can now achieve the same effects natively in the browser (for this example, using an image by Khalil Shah).

One design caution: if used incorrectly or too frequently, blur may make your users feel that they are visiting your site after a week-long bacchanal, quickly producing a headache. Blur is often combined with a mouse rollover detection that undoes the effect, which I’ll also demonstrate in this article.

As before, we’ll apply the easiest version first: the new CSS3 filter. Before that, our HTML5 content:

1. <img src=pakistani-woman.jpg alt="Three-quarter profile photograph of
2. Pakistani woman in black dupatta" class=blur>

Then the blur effect, applied via a class:

1. img.blur { width:367; height:459px;
2. filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
3. -o-filter: blur(3px); -ms-filter: blur(3px); }

The SVG blur filter

To add in support for current versions of Firefox, we need to apply an SVG filter. The blur filter is significantly simpler than those we’ve used in the previous articles:

1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
2. <filter id="blur">
3. <feGaussianBlur stdDeviation="3" />
4. </filter>
5. </svg>

Saved as a file called blur.svg, our CSS then changes to:

1. img.blur { width:367; height:459px;
2. filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
3. -o-filter: blur(3px); -ms-filter: blur(3px);
4. filter: url(blur.svg#blur); }

Building support for older versions of IE

To gain the same effect in IE 4 – 9, we have to use the old DX Microsoft filter. Our class becomes:

1. img.blur { width:367; height:459px;
2. filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px);
3. -o-filter: blur(3px); -ms-filter: blur(3px);
4. filter: url(blur.svg#blur);
5. filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); }

Turning off the effect

If you want to focus the image, you must negate the filter in a new declaration. In this case, I’ll reverse the filter on the image during mouseover via a :hover. (You can see this effect in the header image at the top of this article).

1. img.blur:focus { filter: none; -webkit-filter: blur(0px);
2. -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px);
3. filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); }

If you’re on Chrome, you can see that the image is sharpened over time, the technique for which I will talk about in a future article.

Trimming the edges of the image

One issue is that unlike the other filters we’ve looked at so far, blur takes effect outside the immediate confines of the element, blurring the edges of the image by the amount specified in the blur value. If you want to achieve the effect of having the blur appear only inside the image, there are a few possible techniques:

1. If you have an image that has the same color on all the outside edges, as in the example above, you could set the background-color of the body or a container element to the same color.

2. Use the clip property to trim the edges of the image. clip is always stated in the following order:

   clip: rect( top, offset of right clip from left side, offset of bottom from top, left)

   For the example above, the image is 367px wide × 459 pixels high and the blur 2 pixels, so the clip would be stated as:

   clip: rect(2px,365px,457px,2px);

   (Note that clip is only applied to elements that have position: absolute applied to them. If you wanted to gain support in IE8 and earlier for clip, remember to drop the px on the end of the values).

3. Wrap the image in a containing element (a <div>, for example) that is slightly smaller than the image, applying overflow: hidden to the outer element and moving the image to the left and up slightly to eliminate the visible blur on those edges.

Blurring Text

While you can use this filter to blur text, there are better alternatives, which I discuss in Blurring Text WIth CSS.