Search code examples
cssvisual-effects

Mask that blurs content behind it

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.

Solution

  • Nowadays you can use the backdrop-filter CSS Property.

    CSS:

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