Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
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
svgelement 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 (insetand outset) andtext-shadowcould achieve a similar effect. The link above also contains a start on achieving a similar effect on text.