Mask that blurs content behind it

Question

As a purely aesthetical design thing, I'm wondering if it's possible to have an element with a non-opaque background blur out the content behind it.

More specifically, when I have a modal box appear (as part of my custom alert/confirm/prompt setup), currently the background content is "faded" by having a mask over the screen the same colour as the document's background.

What I'd like to do is apply a small amount of blur (just a few pixels) to the masked content to further direct attention to the modal box.

Browser compatibility is not an issue, since as I mentioned it's purely aesthetical. Preferably I'd like it to work in IE9 as a minimum, and Chrome if possible.

Also, no jQuery. By all means, provide an answer in jQuery if you want, but I'll be translating it to raw JS before letting it near my site.

Answer 1

Nowadays you can use the backdrop-filter CSS Property.

CSS:

.modal {
    backdrop-filter: blur(10px);
}

Answer 2

Not possible with pure CSS..

• You could use (with its limitations) the html2canvas script to render the pages to a canvas.
• Then blur that image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
• Use the toDataUrl to get the image and use it as a background to your popup...

It is quite an involved process and requires a lot of javascript, but i believe it to be the only way to do it...

Answer 3

This would require javascript (and fairly complex javascript).

From what I understand, it sounds like you're trying to create an 'Aero glass' effect where the content behind a semitransparent element is given a blurred effect. It is not possible with HTML and CSS alone (unless you consider using IE-only filters).

At the moment, there aren't any CSS properties that can dynamically apply image filters like you're describing.

Answer 4

The html2canvas solution presented by Gaby is potentially overkill. You can get the same effect with an iframe of the same website that has been blured (via filter blur or another technique - "-webkit-filter: blur(2px)" only works in chrome as far as I know.

This said, I'd say both solutions are really really hacky and I'd personally never use either myself. I tried this out just to see if it was possible at all out of curiosity.

See a (chrome only) example here: https://s3.amazonaws.com/blur-demo/index.html