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 working in Firefox and WebKit using the filter: blur(radius). See Can I Use: CSS filters for which browsers can support this.

.blurredElement {

     /* Any browser which supports CSS3 */
    filter: blur(1px);

    /* Firefox version 34 and earlier */
    filter: url("blur.svg#gaussian_blur");

    /* Webkit in Chrome 52, Safari 9, Opera 39, and earlier */
    -webkit-filter: blur(1px);
}

The blur.svg for Firefox 34 or below looks like this:

You can adjust the radius, but lower values mean better performance.