How do I add a blur BEHIND an html element?

Question

I've dug through the internet and found some things that seem to be going in the right direction but nothing that seemed like a complete solution. Here's what I found:

• The upcoming CSS property backdrop-filter, which is currently only supported in Safari and behind a Chrome developer flag. Exactly what I need, but it needs better support.
• The JavaScript library Blur.js, which seems to have all but disappeared from the internet. (Even the official website leads to a GoDaddy page.) It may have been a solution but I'm not sure what happened to the project.
• The JavaScript library StackBlur, which seems to be a brilliant blurring solution, but I haven't the slightest idea how I would use it to blur BEHIND an element.

Any ideas? Perhaps someone has used StackBlur to do this and has a CodePen I could poke through or something? Basically, I have a grid of element each using jQuery UI Draggable that I would like to make translucent with a nice blur behind each one. The blur needs to update as expected when the elements are dragged around.

One last thought. Right now what I'm using is a pure CSS "solution", but it has some annoying limitations. If you are going to suggest a solution with only CSS it's probably what I'm already doing. The issues with it are the following:

• The area behind the element isn't really blurred, just an arbitrary background image.
• The edges or the blurred area do not cleanly cut off the blur. This is a bit hard to describe, but just trust me when I say that it's doesn't look great.

Unless I missed something huge in all my searching, I think I'm going to need JS for this one.

Answer 1

Barmar is correct. Give two objects the same absolute position. Blur one object and assign it a lower z-index. Bob's your uncle.

If you need some clearer specifics, then please post your code following the SO guidelines.