Full Page Blur in CSS

Question

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

Answer 1

Whatever you are trying to do, if it's not just for fun, don't do it :)

I think you'd have to loop all elements trough the blur filter which only works with IE and not with firefox.

Here's an ugly solution to achieve an IMO ugly blur in FF: http://kilianvalkhof.com/2008/css-xhtml/cross-browser-text-shadow/

Answer 2

I am not sure for all browsers (using text-shadow like tharkun suggests is a possible workaround).

But you are not the only one asking for it, and you can add your vote to this request for adding blur effect to CSS.

Answer 3

I am not sure if this is what you mean, but an often seen blur-like effect is created by creating a full height, full width DIV-element with a background-color and opacity property set.

/* DIV-element with black background and 50% opacity set */
div.overlay {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity = 50); /* required for opacity to work in IE */
}

Since your page height can vary, you'd probably want to use Javascript to set the height for this element.

Answer 4

if you want to use Aron Rotteveel's anwser
change position to fixed, and you can set height to 100%