Blur effect on the entire webpage

Question

I want that the unregistered users on my website, see the entire website\'s pages with a blur effect.

How can I create this blur effect with css ?

Answer 1

Edit (2015): The filter css property is forming tantalisingly complete coverage. This lets you write rules like body { filter: blur(10px); }, which blurs the entire page.

---

From what I can tell, there's no cross-browser way of blurring an element, even in this "modern age" of html5, css3, etc...

There is a blur filter for IE (and only IE). An svg blur filter can also be applied to an html element but from what I can tell, it only works in Firefox.

If you're happy for browser-specific hacks, go ahead, but if you need the effect to work on all browsers you're outta luck.

If you just want to blur text, you can use a clever text-shadow trick:

.blurry {
  color: transparent;
  text-shadow: 0 0 3px black; /* set to colour you want */
}

There are also ways to blur images, either by overlaying transparent, shifted copies of the image, or by processing the data with javascript.

Perhaps you can cobble together these techniques, and it will achieve what you want.

But the broad answer, regrettably, for the moment is: there is no easy, holistic way to blur stuff in HTML.

(I thought we were living in the future, man? What gives?!)

Addendum: Hope is in sight. At the time of writing, some webkit nightly ("bleeding edge") builds are implementing some of the new css filter specification. That demo doesn't work on any webkit browser I have installed, so it's still far from mainstream yet.