css blur effect on a live background

Question

I was looking for a way to blur/glass a background to create some overlays and dialogs. I stumbled upon lots of possible solutions, but none of them fits my requirement.

You can either solve this issue by using two versions of the same image (original + blurred) and then offset the blurred version in the overlay background or you could possibly use some crazy stuff like html2canvas, create a snapshot and basically go for the first solution.

The problem is, that isn't "live" at all. If something changes in the DOM, you don't catch it, especially not if you're just using a blurred version of a single image.

Gecko to the rescue?

Firefox/Gecko introduced a pretty nice css feature called element() a long time ago. It allows you to just clone the face of any element in your live DOM. That comes in pretty handy, to solve my original problem and it looks like this:

Demo: https://codepen.io/anon/pen/prLBpQ (only works in Firefox, unfortunately).

The great thing about element() is, that it is truly live, even if you move other elements within a "target" surface, it reflects instantly on your background. As awesome as this feature is, it's only available in Firefox for years, so my only question is, if there is any other smart way to create a similar live effect on webkit, which I could not think of at present.

Are you sure that's a question for StackOverflow? Seems a little off topic to me — user5014677, Aug 21 '17 at 13:57
@user5014677, did you read the question? It sounds perfectly reasonable to me. — zzzzBov, Aug 21 '17 at 14:00
code review? I think they accept opinion based questions. @zzzzBov He asks for different way of doing something he can do. That's not what stack overflow is for. — user5014677, Aug 21 '17 at 14:02
I'm actually asking for a general way which is not bound to a single vendor. — jAndy, Aug 21 '17 at 14:03
@user5014677, it's not about reviewing the code and making it better, it's about making it functional cross-browser which *is* on-topic for SO. — zzzzBov, Aug 21 '17 at 14:03
@Huangism elaborate? You would again need to like "snapshot" a live DOMTree in order to do so, or did I get that wrong? — jAndy, Aug 21 '17 at 14:08
@jAndy no I mean just create a png layer for that rectangle that's translucent so it kind of blurs the area. I am not sure if it will have a blur effect but if you can ask a designer to see — Huangism, Aug 21 '17 at 14:10
Hate to dupehammer this because JS may not be quite appropriate, but it's essentially the same question and the answer currently still requires JavaScript. — zzzzBov, Aug 21 '17 at 14:10
@Huangism, it's not possible to blur via a semi-translucent PNG. — zzzzBov, Aug 21 '17 at 14:11
@zzzzBov the answers in the dup. post are a bit outdated (this was before filter:blur was available f.ex.). — , Aug 21 '17 at 14:15
@K3N, doesn't make it less of a dupe, just means it's time for a bounty. — zzzzBov, Aug 21 '17 at 14:16
@zzzzBov never mind, I see the top answer has been updated with a filter solution — , Aug 21 '17 at 14:16

syntaxe · Accepted Answer · 2017-08-21T14:48:28.450

// Js only for drag the articles
$(function() {
 $( "article" ).draggable();
});

html {
  background: url(https://2.bp.blogspot.com/-LwilPQw9Zc0/Unzm09oXDxI/AAAAAAAAHwo/30a7ZqSp3jE/s1600/blur-static+.jpg) no-repeat 50% fixed;
  background-size: cover;
}
body {
  width: 100%;
  min-height: 100%;
  background: inherit;
  overflow: hidden;
}
article {
  background: inherit;
  position: relative;
  width: 60%;
  margin: 10vh auto 15vh;
  border-radius: 15px;
  border: 10px solid rgba(255,255,255,.15);
  box-shadow: 1px 1px 4px rgba(0,0,0,.3);
  z-index: 5;
  font-size: 1.4rem;
  cursor: move;
}
article:before {
  content: '';
  position: absolute;
  top: 0; left:0; right:0; bottom:0;
  background: inherit;
  filter: blur(5px); 
  -webkit-filter: blur(6px); 
  -moz-filter: blur(6px);
  -o-filter: blur(6px);
  -ms-filter: blur(6px);
  filter: url(#blur);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='6');
}

<article>
<h2>Blur effect</h2>
</article>

<svg version="1.1" xmlns='http://www.w3.org/2000/svg'>
 <filter id='blur'>
   <feGaussianBlur stdDeviation='6' />
   </filter>
</svg>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

You should perhaps add some explanation to what the code does. Also, drag f.ex. a bottom element on top of some of the above and they won't show through (looks nice otherwise). — , Aug 21 '17 at 14:11
When I start the snippet is works, when I scroll it breaks and becomes normal. After about 1sec delay it gets transparant again (using up to date FF) — Martijn, Aug 21 '17 at 14:11
Even tho, this solution does not cover the "live" aspect from `css element()`. Means, it does not blur other DOM elements underneath. — jAndy, Aug 21 '17 at 14:29

css blur effect on a live background

1 Answers1