A mask that blurs the contents behind it

Question

As a purely aesthetic design, I wonder if it is possible for an element with an opaque background to blur the content behind it.

More specifically, when I have a modal field (as part of my notification / confirmation / prompt settings), the background content is currently “obscured” if the screen displays the same color as the background of the document.

What I would like to do is apply a small amount of blur (just a few pixels) to the masked content, to further draw attention to the modal block.

Browser compatibility is not a problem, as I mentioned it exceptionally aesthetically. It is advisable that it work in IE9 at least, and Chrome, if possible.

Also, no jQuery . By all means, give the answer in jQuery if you want, but I will translate it into raw JS before letting it get closer to my site.

Answer 1

Impossible with pure CSS ..

• You can use (with its limitations) an html2canvas script to display pages on a canvas.
• Then we blur this image or the part you want with http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
• Use toDataUrl to get the image and use it as the background for the popup ...

This is a pretty involved process and requires a lot of javascript, but I believe this is the only way to do this ...

Answer 2

This will require javascript (and rather complex javascript).

From what I understand, it looks like you are trying to create an “Aero glass” effect when the content behind the translucent element gets a blurry effect. This is not possible using only HTML and CSS (unless you use filters only for IE ).

There are currently no CSS properties that can dynamically apply image filters as you describe.

Answer 3

The html2canvas solution provided by Gaby could potentially be redundant. You can get the same effect with the iframe of the same website that was blurred (through a blur filter or another method). "-webkit-filter: blur (2px)" only works in chrome, as far as I know.

That said, I would say that both solutions are really very hacks, and I personally will never use myself. I tried this to make sure that this is generally possible out of curiosity.

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