CSS-Plus
CSS-Plus
Play with web technologies

Gaussian Blur and CSS3/SVG

March 27, 2012
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
Gaussian Blur and CSS3/SVG

Edited: 07 January 2014 - Updated article to reflect current browser support. Gaussian blur is something I use a lot when it comes to Photoshop. It would be very handy to have that kind of 'filter' power within a browser environment.

Before we get started, I think it's just important to understand that both the SVG and CSS filter properties affect an element and all of it's children. A child element cannot be 'un-blurred', only blurred more. There are a few methods of recreating this Gaussian blur effect, some work cross-browser, others don't but will be supported in future.

In the example jsfiddles you may notice HTML IE conditional statements: Usually those conditional statements are applied to the <html> element and I've added them to a div to mimic that functionality.

CSS3 text-shadow

Supported by: Chrome logo Firefox logo Internet Explorer logo Opera logo Safari logo

I'm sure you're either aware of, or easily understand how this trick works. Very simply, you give the text a text-shadow and make the it transparent so that only the shadow is visible. This gives a simple and effective blurred text effect. Usually I would detect for IE9 but it's necessary in this case since IE9 doesn't support text-shadow.

Problems

  • Opera doesn't currently support the transition to the text-shadow property. The blur works well though!
  • I've applied a lte-IE8 shadow filter to the text. It looks more like a smudge than a blur, but there you have it - use it, don't use it.

Fallback

Use Modernizr ( or feature detect manually ) for text-shadow support to apply fallback styles. This is necessary due to the fact that the text has a transparent color and without the shadow, the font is illegible.

SVG blur filter applied to a SVG element

Supported by: Chrome LogoFirefox LogoOpera Logo

The title may seem superfluous but it's actually quite important to understand when it comes to SVG filters. SVG supports filters and we can easily and freely apply these filters to all kinds of SVG elements. Note: NOT all kinds of HTML elements, I'll elaborate a little later.

Problems

  • Chrome isn't currently able to apply a SVG filter if one has already been applied to an element. This means: if a SVG element contains a filter, another filter won't be applied via class change, hover or any other CSS pseudo class.
  • IE6-IE8 doesn't support SVG within HTML. They see these tags as made up tags and treats them as that. They elements are not able to be styled unless the SVG is wrapped in an element and that wrapper element is styled. Alternatively document.createElement() could be used (This is what the HTML5 shim/shiv makes use of. more about it by Paul Irish).
  • No browser supports the transition property being applied to a SVG element

SVG blur filter applied to a SVG image element

Supported by: Chrome Logo Firefox Logo Opera Logo

Most of us want to apply a blur filter to images so the above example is all well and good, but it probably won't be of too much assistance since the CSS3 text-shadow blur does the same thing. We're not able to drop <img> elements into SVG an image, luckily SVG has it's own way of inserting external images. Suddenly this gives us quite a lot of freedom when it comes to Gaussian blur or other SVG filters.

Most of the above problems apply here as well as a few more:

  • Chrome can't apply a SVG filter if one has already been applied, however there is a work around for this in Chrome Canary. If you apply a filter to a parent SVG element and a hover filter to the child element, the hover effect will take place.
  • No browser supports the transition property being applied to an SVG element
  • IE9 renders the image (without an applied filter), But lte-IE8 doesn't display the image whatsoever.

SVG Blur Filter applied to HTML elements

Supported by: Firefox Logo

Problems

  • Firefox is the only browser that supports this
  • The transition property still doesn't take affect when applied

CSS Blur Filter

Supported by: Chrome Canary Logo Opera Logo

This is where it all gets very exciting. A CSS property that fully supports all kinds of filters including the most important one (for this article at least), the blur filter. It is more simple to use than you could ever imagine – element { filter: blur(2px) }

Unfortunately this can't be applied to SVG elements, however there is a bit of a work around: You can wrap the SVG element within an HTML tag and apply the CSS filter to that. The only draw back is that the entire SVG element will be blurred, and not a single element.

It's merely a filter property with a blur value applied. Absolutely amazing. On top of everything, since it's a standard CSS property, the transition property works perfectly. You can transition from a normal image, to a half blurred/half grey scale image if you'd like. It's all up to your imagination.

Problems

  • Not complete browser support. Webkit only, currently.

The "problem" is quite a large set back here. The only browser that supports this is a nightly browser version - This means that we should pretty much stay away from it until at least 2 popular browsers support it... Right?

I think you could use it now actually

  • As long as it's not an absolutely dependant feature, browsers will degrade gracefully - If the property isn't supported, the image is unaffected.
  • It should be supported in Chrome pretty soon
  • You could use the CSS filter (Webkit only) along with the SVG filter applied to an HTML element (Firefox only)

Here is an example of the CSS Filter used alongside the SVG filter.

HTML5 Rocks has a cool article and demo about this property - Keep in mind the demo currently only works in Chrome Canary.

Good old fashioned images

Supported by: Chrome LogoFirefox LogoInternet Explorer LogoOpera LogoSafari Logo

This is obviously the most popular at the moment due to the browser support.

Problems

  • Increased page size due to extra images
  • Increased HTTP requests (if you don't use a sprite)
  • Annoying to manage if something has to change across all images

What was learnt?

Chrome can't swap SVG filters. This means that an element can't have a SVG filter applied and then have that filter change on hover. IE9 can't do much of this which was expected, but what I didn't expect was for Safari to be almost as bad at it.

Anything else?

  • You could blur the images via the HTML5 canvas, but that's another article.
  • I don't really mention Safari in this article - Most of this doesn't seem to work in Safari 5.0.1 for Windows.
  • The CSS filters are going to be very cool

Article influences

Paul Irish helped me look in the right direction - There is a surprisingly little amount of information about this topic out there.

Paul's article SVG filters on HTML5 video was quite informative. High Res Browser Icons was a life saver and I now make use of CSS3 Please multiple times a day.

The IE 'blur' method which was used originates from a useragentman article. Subsequently Zoltan Hawryluk's (the owner of the useragentman blog) added some really helpful comments in the comments area and helped achieve a really good looking text-blur effect for IE7+.