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