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
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-shadow
s (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.