Bluring a div with CSS

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 contents of the div to be blurred as well. (Am I asking too much out of browsers?)

If not possible, what would be some good workaround techniques?

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.

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!