Three-quarter profile of Pakistani woman in black dupatta Three-quarter profile of Pakistani woman in black dupatta
Part of the CSS Filters Reading List

blur is similar to the Gaussian Blur filter in ; its presence in CSS and SVG means we can now achieve the same effects natively on the web.

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. To counteract that, effect blur is often combined with an “undo” transition, which I’ll also demonstrate in this article.

First, our HTML content: 

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

Then the blur effect, applied via a class: 

img.blur {
	width:367;
	height:459px;
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

The SVG blur filter

To this point the blur effect will work in Chrome, Safari (mobile and desktop) and Firefox 35+. To gain support for earlier versions of Firefox, we need to apply an SVG filter: 

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

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

img.blur {
	width:367; height:459px;
	filter: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
}

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: 

img.blur {
	width:367;
	height:459px;
	filter: url(blur.svg#blur);
	-webkit-filter: blur(3px);
	filter: blur(3px);
	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 during mouseover via a :hover. (You can see this effect in the header image at the top of this article). 


img.blur:focus, img.blur:hover {
	-webkit-filter: blur(0px);
	filter: blur(0px);
	filter: none;
	filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

Hovering over the blurred image in a non-IE browser you'll see that it is sharpened over time due to a transition.

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 with its surroundings. If you want the image to be blurred only in the inside, 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, remember to drop the px on the end of the values).

Wrap the image in a containing element (a <div>, for example) that is slightly smaller than the image, apply overflow: hidden to the outer element and move 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 address in the next article.

Photograph by Khalil Shah.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/mkgyl