CSS Background Blur

Question

I want to use the Vista / 7-aero-glass-style effect in a popup on my site, and it should be dynamic. I am fine if this is not a cross-browser effect, as long as the site still works in 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 expected, this eroded the contents of the dialog box , and the background remained clean. Is it possible to use CSS to blur the background of a translucent element instead of its contents?

Answer 1

October 2016 UPDATE

Since the -moz-element() property does not appear to be widely supported by browsers other than FF, there is an even simpler way to apply blur without compromising the contents of the container. Using pseudo-elements in this case is ideal in combination with the svg blur filter.

Check demo using pseudo-element

(The demo was tested in FF v49, Chrome v53, Opera 40 - IE does not seem to support blurring using either the css filter or svg)

---

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

See my demo here.

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

Answer 2

You can use the pseudo-element to place content with the same image as the background, but blurred using the new CSS3 filter.

You can see it in action here: http://codepen.io/jiserra/pen/JzKpx

I did this to customize the selection, but added a background blur effect.

Answer 3

With Safari 9.0, you can use the backdrop-filter property.

HTML

 <div>backdrop blur</div> 

CSS

 div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } 

or if you need a different background color for browsers without support:

 div { background-color: rgba(255, 255, 255, 0.9); } @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) { div { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.5); } } 

Jsfiddle

Mozilla Developer: Background Filter

Safari 9.0

Answer 4

There is a simple and very common method using 2 background images: clear and blurry. You set a clear image as the background for the body and a blurry image as the background image for your container. The blurry image should be set to fixed positioning, and alignment is 100% perfect. I have used it before and it works.

 body { background: url(yourCrispImage.jpg) no-repeat; } #container { background: url(yourBlurryImage.jpg) no-repeat fixed; } 

You can see a working example in the following script: http://jsfiddle.net/jTUjT/5/ . Try resizing your browser and make sure the alignment never works.

---

If only CSS element() supported by browsers other than Mozilla -moz-element() , you could create great effects. Watch a demo with Mozilla .

Answer 5

Use an empty element whose size matches the contents as the background, and place the contents over the blurred element.

 #dialog_base{ background:white; background:rgba(255,255,255,0.8); position: absolute; top: 40%; left: 50%; z-index: 50; margin-left: -200px; height: 200px; width: 400px; filter:blur(4px); -o-filter:blur(4px); -ms-filter:blur(4px); -moz-filter:blur(4px); -webkit-filter:blur(4px); } #dialog_content{ background: transparent; position: absolute; top: 40%; left: 50%; margin-left -200px; overflow: hidden; z-index: 51; } 

The background element may be inside the content element, but not vice versa.

 <div id='dialog_base'></div> <div id='dialog_content'> Some Content <!-- Alternatively with z-index: <div id='dialog_base'></div> --> </div> 

This is not easy if the content is not always consistent, but it works.

Answer 6

You can do it via iframes ... I did something, but the only problem at the moment is to synchronize these divs to scroll at the same time ... its a terrible way, because it is like you are loading 2 websites, but the only one the way i found ... you can also work with divs and overflow, i think ...

Answer 7

In which direction do you want it to be dynamic? If you want the popup to appear in the background successfully, you need to create two backgrounds. This requires the use of element() or -moz-element() and a filter (for Firefox, use an SVG filter, for example filter: url(#svgBlur) , since Firefox does not yet support -moz-filter: blur() ?). It only works in Firefox at the time of writing.

Watch the demo here

I still need to create a simple demo to show how this is done. You can view the source.