Full Page Blur in CSS

Question

How can I blur a whole page using CSS? Other elements such as images are allowed.

Answer 1

This is possible in Firefox only at this time. Here are the steps (see example here).

You need the XHTML doc type (since we're using XML SVG markup).

Insert the SVG element where the blur should appear.

Include inline style (not from external css file).

This gives you a true blur (like zoom out effect), not the standard transparent glass look you find everywhere else.