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

Try this...

body {
   filter:blur(3px);
}

You'll need to add -moz-, -webkit- prefixes (or use something like PrefixFree)

Answer 2

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.

Answer 3

Here's some results, if by blur you mean fuzziness:

This guy uses image shifting and opacity techniques in combo, I know your users are looking at a blurred website, but if there's no easy solution then perhaps taking a snapshot of your rego page and overlaying the image then it might do:

http://web.archive.org/web/20120211000759/http://simurai.com/post/716453142/css3-image-blur

If you wanted to attempt duplicating your rego page, given that it may be a) disabled and b) minimal, then perhaps you could even have a bash at using the above image technique and applying it to node sets, offsetting the copies with CSS positioning and opacity - idk if zoom might help you too there. Even if your page was minimal enough, this would obviously require Javascript to duplicate the nodes, unless your backend can do this node duplication. Just an idea, really. Here's a really awful, very quick example:

http://jsfiddle.net/9qnsz/2/

This SO posts outlines some of the limitations and difficulties with gaussian blur when not done with image, and has some interesting links:

Gaussian Blur onHover Using jQuery

---

EDIT: As requested, the contents of the jsfiddle:

<div class="container">
    <div class="overlay">
        <p>Please register etc etc...</p>
    </div>

    <form action="javascript:;" class="form0">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form1">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form2">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form3">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>
    <form action="javascript:;" class="form4">
        <input type="text" value="Username" />
        <input type="text" value="Password" />
        <button>Submit</button>
    </form>

</div>​


.container {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid #CCC;
}
    form {
        position:absolute;
        left:10px;
        top:10px;
    }
    form.form0 {
        left:11px;
        top:11px;
        opacity:0.1;
    }
    form.form1 {
        left:8px;
        top:8px;
        opacity:0.1;
        zoom:1.02;
    }
    form.form2 {
        left:11px;
        top:11px;
        opacity:0.1;
        zoom:1.01;
    }
    form.form3 {
        left:9px;
        top:9px;
        opacity:0.2;
    }
    form.form4 {
        left:11px;
        top:11px;
        opacity:0.1;
    }

    .overlay {
        width:250px;
        height:250px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
        border:1px solid #666;
    }