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-shadowChrome LogoFirefox LogoInternet Explorer LogoOpera LogoSafari 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 elementChrome 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 elementChrome LogoFirefox LogoOpera 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 ChromeCanary. 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 elementsFirefox Logo

Problems

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

CSS Blur FilterChrome LogoOpera 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.

HTML5Rocks has a cool article and demo about this property – Keep in mind the demo currently only works in Chrome Canary.

Good old fashioned imagesChrome 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+.

What say you?

  1. klsdf says:

    Have you tried SVG animation (SMIL) for filter transitions? It should be possible, hopefully at least in Opera (which has most complete SVG animation support)

    1. Jamy Golden says:

      Hey, no I wasn’t aware SMIL could add transitions to things such as filters. Thanks I’ll look into that.

  2. Do you think use the last approach but using canvas to simulate the blurred image ?

    1. Jamy Golden says:

      This article was CSS/SVG focussed – I plan on writing up another HTML5/JS based article in the near future.

  3. Hey there

    Great write up — good to see the variety of ways to do this. I would suggest an alternative to your first example’s IE rules. I posted an updated fiddle at http://jsfiddle.net/uNQyC/ to illustrate it. Note that it uses the Blur filter as opposed to the Glow filter. I think you will see this gives better results in IE.

    Similarily, your 3rd example can also use the Blur filter: http://jsfiddle.net/3asZC/4/

    IE Visual Filters can be hackish, but if you play around with them a bit, you can do some surprising stuff :-)

    1. Oops … When I say IE above, I mean “IE 8 and lower”. (*^_^*);;;

    2. Jamy Golden says:

      I don’t get a text-blur effect on the first example in IE7, but it definitely looks better in IE8 than the one I’ve got up now! The Image blur looks great on both – I’ll add that in to the article sometime this week. Thanks =)

    3. Ahhh … forgot to put a “zoom: 1″ to “force layout” in IE7, which is necessary for IE Visual Filters need to work:

      http://jsfiddle.net/uNQyC/2/

      :-)

    4. Sorry for spamming — I just forgot to worry about IE9 as well: http://jsfiddle.net/uNQyC/5/

  4. Alec says:

    Nice article, Have you found anything in regards to blurring the background behind an element? (ie if there is a small blurred element on top of a larger image, the overlap between the 2 elements are blurred)

    1. Jamy Golden says:

      This is actually why I looked into blurring in the first place – Unfortunately it just doesn’t work like that… However, you could position an element ontop of the image and use that image as the element’s backgorund, position it correctly and then add a blur. This is obviously not something very dynamic, so it would require javascript for that.

      If you would like to do the same but not with a big image, you could mimic that in Firefox. There is a firefox property called element – It allows you to use an element as a background image. So you could do the same thing as above using the element as a background-image.

  5. Tim says:

    The CSS Blur Filter which you mention only works in Chrome Canary, seems to work in Firefox Nightly builds too, just saying :)

  6. Man, I have absolutely no use for this but I wanted to! It’s so cool.

  7. Timon says:

    Well, you could also use Imagick::blurImage.

  8. Just a side note, Firefox Nightly (tested on 18.0a1) supports the blur filter using CSS, not only Chrome Canary.

  9. paul says:

    i want a border to be blured??
    Is it possible i dont get the result

    1. Jamy Golden says:

      You would have to “fake” the border. Try faking it with absolutely positioned divs.

  10. Vedran says:

    I was first impressed with the text-shadow technique, but then I saw “Good old fashioned images” one and was: man this guy rocks, how the hell didn’t I think of it. The solution is so simple that it’s ingenious.

    I checked out the rest of your site, great stuff here, hope you will be posting more off it soon!

  11. Hi
    Thanks For Publishing This Article.
    Is that possible to apply the blur effect to a background image?
    Thanks

  12. Ben says:

    Hi, really interesting article, I was wondering if there was any “JS” implementation of a blur filter.
    Here is what I wanna realize :

    Do a semi-transparent rectangle div above the background, and just blur this one, just where the div is on top of it …
    As I actually do understand how to put compactibles css3 gradients & transparency effect, I just miss the blur thing :)

    Regards

    1. Jamy Golden says:

      If you blur an element, it will only blur that element and it’s children. If you have a div placed ontop of an image and you blur the div, it would essentially be blurring a transparent background which we wouldn’t see.

      In order to replicate what you’re talking about you would have to “fake” it by giving the div the background of the image it is sitting on top of and position the background so that it seamlessly fits with the image. If you then blurred the div it would give the effect of the image being blurred at a certain spot.

      I hope that made sense, let me know if it didn’t.

  13. Biance says:

    Hi,

    Awesome article – I was wondering your css image blur example, how could you reverse it? Similarly to how your text example was blurred and then upon hover it is unblurred – could this be done with the css image blur?

    Thank you!

    1. Jamy Golden says:

      Hi and thanks :) Yes you can do that, check out this demo: http://jsfiddle.net/jamygolden/875zf/1/

  14. Devin Walker says:

    Awesome article. The last demo is awesome for images.

  15. diogo says:

    hi!!
    Is possible half of image blur?
    thankss!

    1. Jamy Golden says:

      Yeah it depends which method you use, but you should be able to easily change the level of blur.

  16. It seems that all of the example fiddles you’ve posted in your article work fine in my browser (Firefox 26.0) Has support grown substantially lately?

    1. Jamy Golden says:

      Hi David, I’ve updated the article to reflect the current browser support. Firefox still doesn’t support the filter property.