Css blur effect on live background

Question

I was looking for a way to blur / shade the background to create some overlays and dialogs. I came across many possible solutions, but none of them meet my requirement.

You can solve this problem by using two versions of the same image (original + blurry) and then shifting the blurry version against the background of the overlay or you can use some crazy things like html2canvas, create a snapshot and basically go the first solution.

The problem is that it is not "living" at all. If something changes in the DOM, you won’t catch it, especially if you just use a blurry version of a single image.

Gekko to the rescue?

Firefox / Gecko long ago introduced a pretty nice css feature called element(). This allows you to simply clone the face of any element in your live DOM. It is very convenient to solve my initial problem, and it looks like this:

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

The great thing about it element()is that it is truly alive, even if you move other elements inside the “target” surface, it instantly reflects on your background. As wonderful as this feature, it has only been available in Firefox for many years, so my only question is is there any other smart way to create a similar live effect on webkit that I couldn't think of right now.

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>

Hide result