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

User · Answer

Use an empty element sized for the content as the background, and position the content 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 can be inside of the content element, but not the other way around.

<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 consistently sized, but it works.

User · Answer

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

User · Answer

There is a simple and very common technique by using 2 background images  a crisp and a blurry one  You set the crisp image as a background for the body and the blurry one as a background image for your container  The blurry image must be set to fixed positioning and the alignment is 100  perfect  I 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 at the following fiddle  http   jsfiddle net jTUjT 5   Try to resize the browser and see that the alignment never fails     If only CSS element   was supported by other browsers other than Mozilla s -moz-element   you could create great effects  See this demo with Mozilla

User · Answer

You can use a pseudo-element to position as the background of the content with the same image as the background  but blurred with the new CSS3 filter   You can see it in action here  http   codepen io jiserra pen JzKpx  I made that for customizing a select  but I added the blur background effect

User · Answer

In which way do you want it dynamic  If you want the popup to successfully map to the background  you need to create two backgrounds  It requires both the use of element   or -moz-element   and a filter  for Firefox  use a SVG filter like filter  url  svgBlur  since Firefox does not support -moz-filter  blur   as yet    It only works in Firefox at the time of writing   See demo here   I still need to create a simple demo to show how it is done  You re welcome to view the source

User · Answer

You could make it through iframes    I made something  but my only problem for now is syncing those divs to scroll simultaneous    its terrible way  because its like you load 2 websites  but the only way I found    you could also work with divs and overflow I guess

User · Answer

In recent versions of major browsers you can use backdrop-filter property   HTML   lt div gt backdrop blur lt  div gt    CSS  div       -webkit-backdrop-filter  blur 10px       backdrop-filter  blur 10px       or if you need 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               Demo  JSFiddle  Docs  Mozilla Developer  backdrop-filter  Is it for me   CanIUse

[css] Background blur with CSS

Examples related to css

Examples related to aero-glass

[css] Background blur with CSS

Examples related to css

Examples related to popup

Examples related to aero-glass