creating a blurred background effect

Question

I am trying to create a blur effect on a page. I want a popup to show, and then the rest of the page be blurred. However I only seem to be able to blur background images, not actual elements on the page, is what I am trying to do even possible?

possible duplicate of [Blur effect on a div element](http://stackoverflow.com/questions/11977103/blur-effect-on-a-div-element) — Biff MaGriff, Nov 01 '13 at 14:03
Modern browsers only - https://developer.mozilla.org/en-US/docs/Web/CSS/filter — Adam Jenkins, Nov 01 '13 at 14:03
possible duplicate of [How to use CSS (and JavaScript?) to create a blurred, "frosted" background?](http://stackoverflow.com/questions/17092299/how-to-use-css-and-javascript-to-create-a-blurred-frosted-background) — apaul, Nov 03 '13 at 17:44
Possible duplicate http://stackoverflow.com/questions/9268593/jquery-set-modal-dialog-overlay-color — ChrisF, Jan 22 '14 at 13:56

score 5 · Answer 1 · edited May 23 '17 at 12:22

You can blur individual elements, but you can't create a blurring overlay.

Fortunately, the CSS -prefix-filter: blur(##) automatically applies to child elements. What you'd need to is wrap every element except your popup in a div, then apply the blur to that.

Example JS:

$('body > *').wrap('<div class="blur-all">').append($popup);

CSS:

.blur-all {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
}

Don't forget to unwrap the children of .blur-all once you're done with the popup.

creating a blurred background effect

1 Answers1