CSS-Plus
CSS-Plus
Play with web technologies

How to add a Gaussian Blur effect to elements within firefox

May 10, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
How to add a Gaussian Blur effect to elements within firefox

I have been trying to find an easy, efficient way of applying a Gaussian blur effect to images and elements. I would usually achieve this by creating the image with the Gaussian Blur effect already applied. I wouldn't say this is efficient at all. It is about as efficient as creating rounded corners using images.

One of the ways to apply a Gaussian blur to elements and images is by making use of the svg filters. It can be applied to any element or image just by adding a bit of code to the HTML and specifying which element you would like to target within the CSS.

The HTML

xmlns:svg="http://www.w3.org/2000/svg" must be added to the <html> tag. A working example would look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"></html>

This allows Firefox to make use of the SVG filters. We also have to add one last bit of HTML to get this thing working.

<body>
    <p>Pellentesque habitant morbi tristique senectus</p>
    <img src="images/gaussian-blur.png" alt="" />

    <svg:svg>
        <!-- Filter ID/Name -->
        <svg:filter id="example-one">
            <!-- Amount of Gaussian Blur that should be applied -->
            <svg:feGaussianBlur stdDeviation="0.9" />
        </svg:filter>
        <svg:filter id="example-two">
            <svg:feGaussianBlur stdDeviation="2" />
        </svg:filter>
    </svg:svg>
</body>

The CSS

The CSS is quite simple and easy to implement. (This must be an INTERNAL stylesheet. - It does not work if it is external, for some reason)

<style type="text/css">
    p {
        filter: url(#example-one);
    }
    img:hover,
    p:hover {
        filter: url(#example-two);
    }
</style>

The ID that the url refers to is the ID we set within the svg html section.

!important

Any problems? - In short, yes. In long, yes. There are quite a few problems and little annoyances I have come across. Here is a list (There are probably more that I haven't come across):

  • The filter only works in Firefox
  • The filter only works if the file extension is .xhtml
  • IE doesn't seem to open .xhtml file extensions, it automatically attempts to download it.
  • An internal style sheet HAS to be used in order for the svg filter to take effect.
  • jQuery doesn't seem to work properly with .xhtml file extensions. Certain methods that I tried, worked - css(), animate() - and other methods didn't - html(), prepend(), append().
  • The HTML doesn't validate. Adding the html via jQuery in order to achieve validation doesn't work since the methods I used to achieve this didn't work within the .xhtml file

Conclusion

I think the effect is very cool and I have fun playing around with it, but I would never use this on an actual web page since there are just too many quirks. For the moment, I think I will stick to images. If you are interested in applying clip-paths, filters and/or masks within webpages, or if you would just like more information regarding the Gaussian Blur, have a look weblogs.mozillazine.

Demo