Bluring a div with CSS

Question

Is it possible to blur a div with CSS3? And I don\'t mean the javascript blur, I mean the photoshop blur.

I don\'t want the edges of the div to be blurred, I want to con

Answer 1

Well... I came up with this:

.blur {
    color: transparent;
    text-shadow: 0px 0px 2px #000000;
}

This will make the text blurry, for sure! Only thing is that it will make only text blurry. No images affected or anything. But I think that together with this http://plugins.jquery.com/project/blurimage you could make it more powerful!

Have fun with experiments!

Answer 2

It is possible with an SVG filter.

The basics of it is that it's just a simple feGaussianBlur.

Here it is: http://jsfiddle.net/aXUtU/1/

This works in Firefox 4, and should work from 3.5 up except for the matter of using the svg element without namespace/xmlns stuff (I think it should work in 3.6).

There are some issues with how much space it gives it to flow in; if you take that text down to one line you'll see the last in particular is getting clipped.

---

Depending on your content, combining multiple box-shadows (inset and outset) and text-shadow could achieve a similar effect. The link above also contains a start on achieving a similar effect on text.