css blur effect on a live background [duplicate]

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.

Answer 1

// 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>