How can I make a CSS glass blur effect work for an overlay

Question

I am having trouble applying a blur effect on a semi-transparent overlay div  I d like everything behind the div the be blurred  like this     Here is a jsfiddle which doesn t work  http   jsfiddle net u2y2091z   Any ideas how to make this work  I d like to keep this as uncomplicated as possible and have it be cross-browser  Here is the CSS I m using    overlay       position  absolute      left  0      top  0      right  0      bottom  0       background black      background rgba 0 0 0 0 8        filter blur 4px       -o-filter blur 4px       -ms-filter blur 4px       -moz-filter blur 4px       -webkit-filter blur 4px

User · Answer

Here s a possible solution   HTML   lt img id  source  src  http   www byui edu images agriculture-life-sciences flower jpg    gt    lt div id  crop  gt       lt img id  overlay  src  http   www byui edu images agriculture-life-sciences flower jpg    gt   lt  div gt    CSS   crop       overflow  hidden       position  absolute      left  100px      top  100px       width  450px      height  150px      overlay       -webkit-filter blur 4px       filter blur 4px        width  450px      source       height  300px      width  auto      position  absolute      left  100px      top  100px      I know the CSS can be simplified and you probably should get rid of the ids  The idea here is to use a div as a cropping container and then apply blur on duplicate of the image  Fiddle  To make this work in Firefox  you would have to use SVG hack

User · Answer

If you re looking for a reliable cross-browser approach today  you won t find a great one  The best option you have is to create two images  this could be automated in some environments   and arrange them such that one overlays the other  I ve created a simple example below    lt figure class  js  gt       lt img src  http   i imgur com 3oenmve png    gt       lt img src  http   i imgur com 3oenmve png 1  class  blur    gt   lt  figure gt    figure js       position  relative      width  250px  height  250px     figure js  blur       top  0  left  0      position  absolute      clip  rect  0  250px  125px  0        Though effective  even this approach isn t necessarily ideal  That being said  it does yield the desired result

User · Answer

Here is an example that uses svg filter  The idea is to use an svg element with height same as the  overlay and apply the feGaussianblur filter on it  This filter is applied on an svg image element  To give it an extruded effect  you could use a box-shadow at the bottom of the overlay  Browser Support for svg filters  Demo on Codepen  x000D   x000D  body     background   222222     container     position  relative    width  450px    margin  0 auto    img     height  300px     overlay     position  absolute    left  0    top  0    width  100     z-index  1    color  rgba 130  130  130  0 5     font-size  50px    text-align  center    line-height  100px    box-shadow  0 3px 5px rgba 0  0  0  0 3     x000D   lt div id  container  gt     lt img src  http   lorempixel com 450 300 sports    gt     lt div id  overlay  gt WET lt  div gt     lt svg width  450  height  100  viewBox  0 0 450 100  style  position  absolute  top  0   gt       lt defs gt         lt filter id  blur  gt           lt feGaussianBlur in  SourceGraphic  stdDeviation  3    gt         lt  filter gt       lt  defs gt       lt image filter  url  blur   xlink href  http   lorempixel com 450 300 sports  x  0  y  0  height  300px  width  450px    gt     lt  svg gt   lt  div gt  x000D   x000D   x000D

User · Answer

background  rgba 255 255 255 0 5   backdrop-filter  blur 5px     Instead of adding another blur background to your content  you can use backdrop-filter  FYI IE 11 and Firefox may not support it  Check caniuse   Demo    x000D   x000D  header   x000D    position  fixed  x000D    width  100   x000D    padding  10px  x000D    background  rgba 255 255 255 0 5   x000D    backdrop-filter  blur 5px   x000D    x000D  body   x000D    margin  0  x000D    x000D   lt header gt  x000D    Header x000D   lt  header gt  x000D   lt div gt  x000D     lt img src  https   dummyimage com 600x400 000 fff    gt  x000D     lt img src  https   dummyimage com 600x400 000 fff    gt  x000D     lt img src  https   dummyimage com 600x400 000 fff    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I was able to piece together information from everyone here and further Googling  and I came up with the following which works in Chrome and Firefox  http   jsfiddle net xtbmpcsu   I m still working on making this work for IE and Opera   The key is putting the content inside of the div to which the filter is applied    lt div id  mask  gt       lt p gt Lorem ipsum     lt  p gt       lt img src  http   www byui edu images agriculture-life-sciences flower jpg    gt   lt  div gt    And then the CSS   body       background   300000      background  linear-gradient 45deg   300000   000000   300000   000000       color  white     mask       position  absolute      left  0      top  0      right  0      bottom  0      background-color  black      opacity  0 5    img       filter  blur 10px       -webkit-filter  blur 10px       -moz-filter  blur 10px       -o-filter  blur 10px       -ms-filter  blur 10px       position  absolute      left  100px      top  100px      height  300px      width  auto      So mask has the filters applied  Also  note the use of url   for a filter with an  lt svg gt  tag for the value -- that idea came from http   codepen io AmeliaBR pen xGuBr  If you happen to minify your CSS  you might need to replace any spaces in the SVG filter markup with   20    So now  everything inside the mask div is blurred

User · Answer

I came up with this solution  Click to view image of blurry effect It is kind of a trick which uses an absolutely positioned child div  sets its background image same as the parent div and then uses the background-attachment fixed CSS property together with the same background properties set on the parent element  Then you apply filter blur 10px   or any value  on the child div   x000D   x000D         margin 0      padding 0      box-sizing  border-box     background      position  relative      width 100       height 100vh      background-image url  https   images unsplash com photo-1547937414-009abc449011 ixlib rb-1 2 1 amp ixid eyJhcHBfaWQiOjEyMDd9 amp auto format amp fit crop amp w 1350 amp q 80        background-size cover      background-position  center      background-repeat no-repeat      blur      position  absolute      top 0      left 0      width 50       height 100       background-image url  https   images unsplash com photo-1547937414-009abc449011 ixlib rb-1 2 1 amp ixid eyJhcHBfaWQiOjEyMDd9 amp auto format amp fit crop amp w 1350 amp q 80        background-position  center      background-repeat  no-repeat      background-attachment  fixed      background-size cover      filter blur 10px       transition filter  5s ease      backface-visibility  hidden      background hover  blur      filter blur 0      text      display  inline-block      font-family  sans-serif      color white      font-weight  600      text-align  center      position  relative      left 25       top 50       transform translate -50  -50      x000D   lt head gt       lt title gt Blurry Effect lt  title gt   lt  head gt   lt body gt       lt div class  background  gt           lt div class  blur  gt  lt  div gt           lt h1 class  text  gt This is the  lt br gt blurry side lt  h1 gt       lt  div gt   lt  body gt  x000D   x000D   x000D   view on codepen

User · Answer

Here s a solution that works with fixed backgrounds  if you have a fixed background and you have some overlayed elements and you need blured backgrounds for them  this solution works    Image we have this simple HTML    lt body gt   lt  -- or any wrapper -- gt      lt div class  content  gt Some Texts lt  div gt   lt  body gt    A fixed background for  lt body gt  or the wrapper element   body     background-image  url http   placeimg com 640 360 any     background-size  cover    background-repeat  no-repeat    background-attachment  fixed      And here for example we have a overlayed element with a white transparent background    content     background-color  rgba 255  255  255  0 3     position  relative      Now we need to use the exact same background image of our wrapper for our overlay elements too  i use it as a  before psuedo-class    content before     content        position  absolute    top  0    left  0    width  100     height  100     z-index  -1    filter  blur 5px     background-image  url http   placeimg com 640 360 any     background-size  cover    background-repeat  no-repeat    background-attachment  fixed      Since the fixed background works in a same way in both wrapper and overlayed elements  we have the background in exactly same scroll position of the overlayed element and we can simply blur it  Here s a working fiddle  tested in Firefox  Chrome  Opera and Edge  https   jsfiddle net 0vL2rc4d   NOTE  In firefox there s a bug that makes screen flicker when scrolling and there are fixed blurred backgrounds  if there s any fix  let me know

User · Answer

For a more simple and up to date answer   backdrop-filter  blur 6px     Note browser support is not perfect but in most cases a blur would be non essential

User · Answer

x000D   x000D   bg   search-bg   x000D    background-image  url  https   images pexels com photos 719609 pexels-photo-719609 jpeg w 940 amp h 650 amp auto compress amp cs tinysrgb    x000D    background-repeat  no-repeat  x000D    background-size  1080px auto  x000D    x000D   x000D   bg   x000D    background-position  center top  x000D    padding  70px 90px 120px 90px  x000D    x000D   x000D   search-container   x000D    position  relative  x000D    x000D   x000D   search-bg   x000D       Absolutely position it  but stretch it to all four corners  then put it just behind  search s z-index    x000D    position  absolute  x000D    top  0px  x000D    right  0px  x000D    bottom  0px  x000D    left  0px  x000D    z-index  99  x000D   x000D       Pull the background 70px higher to the same place as  bg s    x000D    background-position  center -70px  x000D   x000D    -webkit-filter  blur 10px   x000D    filter  url   media blur svg blur    x000D    filter  blur 10px   x000D    x000D   x000D   search   x000D       Put this on top of the blurred layer    x000D    position  relative  x000D    z-index  100  x000D    padding  20px  x000D    background  rgb 34 34 34      for IE    x000D    background  rgba 34 34 34 0 75   x000D    x000D   x000D   media  max-width  600px     x000D     bg   padding  10px    x000D     search-bg   background-position  center -10px    x000D    x000D   x000D   search h2   search h5   search h5 a   text-align  center  color   fefefe  font-weight  normal    x000D   search h2   margin-bottom  50px   x000D   search h5   margin-top  70px   x000D   lt div id  bg  gt  x000D     lt div id  search-container  gt  x000D       lt div id  search-bg  gt  lt  div gt  x000D       lt div id  search  gt  x000D         lt h2 gt Awesome lt  h2 gt  x000D         lt h5 gt  lt a href     gt How it works    lt  a gt  lt  h5 gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

From backdrop-filter     apply graphical effects such as blurring or color shifting to the area behind an element  Because it applies to everything behind the element  to see the effect you must make the element or its background at least partially transparent

User · Answer

This will do the blur overlay over the content   blur     display  block    bottom  0    left  0    position  fixed    right  0    top  0    -webkit-backdrop-filter  blur 15px     backdrop-filter  blur 15px     background-color  rgba 0  0  0  0 5

[html] How can I make a CSS glass/blur effect work for an overlay?

Examples related to html

Examples related to css

Examples related to blur

Examples related to css-filters