Background blur with CSS

Question

I want an Vista/7-aero-glass-style effect on a popup on my site, and it needs to be dynamic. I'm fine with this not being a cross-browser effect as long as the site still works on all modern browsers.

My first attempt was to use something like

#dialog_base {
  background:white;
  background:rgba(255,255,255,0.8);

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

However, as I should have expected, this resulted in the content of the dialog being blurred and the background staying clear. Is there any way to use CSS to blur the background of a semitransparent element instead of its contents?

Answer 1

OCT. 2016 UPDATE

Since the -moz-element() property doesn't seem to be widely supported by other browsers except to FF, there's an even easier technique to apply blurring without affecting the contents of the container. The use of pseudoelements is ideal in this case in combination with svg blur filter.

Check the demo using pseudo-element

(Demo was tested in FF v49, Chrome v53, Opera 40 - IE doesn't seem to support blur either with css or svg filter)

---

The only way (so far) of having a blur effect in the background without js plugins, is the use of -moz-element() property in combination with the svg blur filter. With -moz-element() you can define an element as a background image of another element. Then you apply the svg blur filter. OPTIONAL: You can utilize some jQuery for scrolling if your background is in fixed position.

See my demo here

I understand it is a quite complicated solution and limited to FF (element() applies only to Mozilla at the moment with -moz-element() property) but at least there's been some effort in the past to implement in webkit browsers and hopefully it will be implemented in the future.