1

I have a problem with CSS blur effect on my website, because when I want to set this effect on a div on my page it is not working correctly and the div have a blur weird inner shadow effect, this picture showing the problem:

enter image description here

as you see the blur effect not working is just an inner glow or shadow in the overlay box.

The Code:

.overlay__board {
  background-color: rgba(0, 0, 0, 0.8);
  position: fixed;
  z-index: 99;
  height: 100%;
  width: 100%;
  display: block;
  top: 0px;
  left: 0px;
  filter: blur(17px);
}
.follow__board__popup {
  width: 791px;
  height: 626px;
  border: 1px solid #ccc;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  z-index: 9999;
}
<div class="overlay__board"></div>
<div class="follow__board__popup"></div>

https://jsfiddle.net/iklas/dzagx0y5/

iklas
  • 100
  • 2
  • 10
  • Create a fiddle with your HTML and CSS code in jsfiddle.net and share it. – Arun Prakash Feb 08 '16 at 10:30
  • 3
    Possible duplicate of [Background blur with CSS](http://stackoverflow.com/questions/14565520/background-blur-with-css) – Krish Feb 08 '16 at 10:32
  • the blur effect mixes a pixel with the pixels around... but offcanvas there is no pixels around so it looks like this close to the screen edges. If you apply a blur to a full-viewport-element, I recommend you to set the page background color to the same color of this element. – L777 Feb 08 '16 at 10:58
  • The Fiddle is appering empty.. – miguelmpn Feb 08 '16 at 11:37

2 Answers2

0

The filter: blur() property only blurs the element it is applied to. So your black overlay element is trying to blur that black and as a result the alpha is creeping in creating a vignette effect.

To blur the background elements you would want to apply the blur to those element directly but this probably would be quite a pain to maintain depending on the modularity of your overlay pop up.

elmarko
  • 813
  • 7
  • 17
  • thank you @elmarko for your answer can i'm not understanding good your answer and can you edit this fiddle to what you want to explain. https://jsfiddle.net/iklas/dzagx0y5/ – iklas Feb 08 '16 at 11:29
0

As mentioned in @elmarok's answer, the filter() property applies to its contents, not the elements behind it. There are two solutions:

  1. Wrap non-modal content ad then apply filter
  2. Solution 2: Use backdrop-filter property

Solution 1: Wrap non-modal content ad then apply filter

This is by far the most commonly-used method. Wrap all the content of your page, except for the modal box and its backdrop, in another element (our favourite: <div>) and then apply a CSS blur filter to it. This trick enjoys 80.47% global support.

.overlay__board {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 99;
  height: 100vh;
  width: 100vw;
  display: block;
  top: 0px;
  left: 0px;
}
.follow__board__popup {
  width: 50%;
  height: 50%;
  border: 1px solid #ccc;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  z-index: 9999;
}
.content {
  -webkit-filter: blur(5px);
  filter: blur(5px);
  }
<div class="overlay__board"></div>
<div class="follow__board__popup"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus metus at mauris aliquam varius. Vivamus hendrerit, ante ac volutpat mattis, ante turpis scelerisque risus, a accumsan tortor leo sit amet magna. Fusce pellentesque eget nisl eu
    sodales. Aenean congue purus lectus, eu tristique mi eleifend eu. Proin vehicula, purus eu rutrum luctus, ex leo efficitur turpis, ac elementum urna massa vehicula erat. Nam eu lorem non enim pretium porta. Morbi posuere velit id egestas tristique.
    Aliquam efficitur vehicula ante in ornare. Fusce scelerisque facilisis mi, sit amet facilisis sapien tempus vitae. Phasellus vulputate feugiat leo, pretium pharetra magna mattis ac. Vivamus ultricies placerat faucibus. Duis vitae nulla id nisl gravida
    vehicula non non lectus. Praesent dui velit, consequat vel arcu ac, pellentesque consectetur lacus. Aenean pellentesque, eros sit amet sollicitudin molestie, nisl quam fringilla eros, non gravida felis risus non est.</p>
  <p>Nunc laoreet imperdiet ex, nec maximus ligula vestibulum sed. Phasellus mollis leo dapibus, hendrerit dolor eu, eleifend ipsum. Nunc feugiat, nisl ac rhoncus porta, libero eros consequat tortor, posuere convallis felis mi nec nulla. Maecenas ipsum neque,
    euismod ac risus vitae, gravida blandit urna. Nullam vestibulum porta pellentesque. Sed id mollis orci. Sed efficitur lorem vitae purus laoreet, eget aliquam dui pulvinar. Ut id sapien at neque porta mollis eget vitae elit. Nullam diam ex, commodo
    a tellus a, porttitor porta nisi. Ut sit amet tincidunt nisl. Ut non mi sed massa tincidunt gravida. Phasellus efficitur pharetra nunc ac venenatis. Duis dolor enim, aliquam eu tincidunt eu, scelerisque vitae metus. Nulla fringilla eu quam eget semper.
    Sed quis est in justo venenatis iaculis. Morbi ut rhoncus enim, imperdiet hendrerit elit.</p>
  <p>Proin blandit arcu ac vehicula blandit. Proin et velit sapien. Sed placerat elementum molestie. Vivamus porttitor cursus eros tincidunt molestie. Suspendisse aliquet metus mollis orci ornare iaculis. Sed vel lacus hendrerit, venenatis libero et, porta
    enim. Vestibulum hendrerit sed quam ut commodo. Suspendisse laoreet malesuada leo, sed aliquam est pellentesque sit amet. Vivamus sodales ullamcorper felis. Suspendisse potenti. Morbi eget libero in velit consectetur sagittis non sed ipsum. Quisque
    mauris quam, mattis quis nulla eget, rhoncus mollis tortor. Pellentesque fringilla consequat nisi egestas consectetur. Quisque consectetur facilisis sapien sit amet tincidunt. Nulla suscipit tempor lacus, nec fermentum quam efficitur ut.</p>
  <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras hendrerit sapien eros. Aenean turpis justo, varius ac orci sit amet, porta malesuada enim. Aliquam erat volutpat. Sed a ligula nec ligula rutrum congue. Integer
    sit amet vulputate nibh. Sed ac mollis ex, et ultricies diam.</p>
  <p>Aenean vestibulum in ex vitae tincidunt. Etiam dapibus varius est sit amet facilisis. Duis a neque mi. Maecenas tempor scelerisque mattis. Quisque sapien neque, scelerisque quis velit id, vulputate consectetur eros. Aliquam erat ipsum, ultrices vitae
    purus at, fringilla imperdiet sapien. Pellentesque in tellus eleifend, ullamcorper ipsum vel, auctor purus. Quisque porttitor eu nisl ut hendrerit. Morbi facilisis eleifend tempus. Sed hendrerit quam ac auctor semper. Vivamus lacinia eros nunc, quis
    volutpat odio rhoncus et. Maecenas hendrerit est sit amet hendrerit maximus. Proin condimentum quam fringilla augue condimentum lacinia. Vestibulum luctus urna vitae neque gravida, in rutrum mi tincidunt. Donec aliquam feugiat felis, eu ornare elit
    maximus sed.</p>
</div>

Solution 2: Use backdrop-filter property

This trick works elegantly for webkit browsers, but only the latest versions of Safari and Google Canary (Chrome doesn't support it as of yet)—with a measly 8.37% global support. The declaration is extremely simple, and works as expected. I have attached a screenshot for those whose browsers do not support the property:

How backdrop-filter looks like on Safari 9.1, OS X 10.11 beta

.overlay__board {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  position: fixed;
  z-index: 99;
  height: 100vh;
  width: 100vw;
  display: block;
  top: 0px;
  left: 0px;
}
.follow__board__popup {
  width: 50%;
  height: 50%;
  border: 1px solid #ccc;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  z-index: 9999;
}
<div class="overlay__board"></div>
<div class="follow__board__popup"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus metus at mauris aliquam varius. Vivamus hendrerit, ante ac volutpat mattis, ante turpis scelerisque risus, a accumsan tortor leo sit amet magna. Fusce pellentesque eget nisl eu sodales.
  Aenean congue purus lectus, eu tristique mi eleifend eu. Proin vehicula, purus eu rutrum luctus, ex leo efficitur turpis, ac elementum urna massa vehicula erat. Nam eu lorem non enim pretium porta. Morbi posuere velit id egestas tristique. Aliquam efficitur
  vehicula ante in ornare. Fusce scelerisque facilisis mi, sit amet facilisis sapien tempus vitae. Phasellus vulputate feugiat leo, pretium pharetra magna mattis ac. Vivamus ultricies placerat faucibus. Duis vitae nulla id nisl gravida vehicula non non
  lectus. Praesent dui velit, consequat vel arcu ac, pellentesque consectetur lacus. Aenean pellentesque, eros sit amet sollicitudin molestie, nisl quam fringilla eros, non gravida felis risus non est.</p>
<p>Nunc laoreet imperdiet ex, nec maximus ligula vestibulum sed. Phasellus mollis leo dapibus, hendrerit dolor eu, eleifend ipsum. Nunc feugiat, nisl ac rhoncus porta, libero eros consequat tortor, posuere convallis felis mi nec nulla. Maecenas ipsum neque,
  euismod ac risus vitae, gravida blandit urna. Nullam vestibulum porta pellentesque. Sed id mollis orci. Sed efficitur lorem vitae purus laoreet, eget aliquam dui pulvinar. Ut id sapien at neque porta mollis eget vitae elit. Nullam diam ex, commodo a
  tellus a, porttitor porta nisi. Ut sit amet tincidunt nisl. Ut non mi sed massa tincidunt gravida. Phasellus efficitur pharetra nunc ac venenatis. Duis dolor enim, aliquam eu tincidunt eu, scelerisque vitae metus. Nulla fringilla eu quam eget semper.
  Sed quis est in justo venenatis iaculis. Morbi ut rhoncus enim, imperdiet hendrerit elit.</p>
<p>Proin blandit arcu ac vehicula blandit. Proin et velit sapien. Sed placerat elementum molestie. Vivamus porttitor cursus eros tincidunt molestie. Suspendisse aliquet metus mollis orci ornare iaculis. Sed vel lacus hendrerit, venenatis libero et, porta
  enim. Vestibulum hendrerit sed quam ut commodo. Suspendisse laoreet malesuada leo, sed aliquam est pellentesque sit amet. Vivamus sodales ullamcorper felis. Suspendisse potenti. Morbi eget libero in velit consectetur sagittis non sed ipsum. Quisque
  mauris quam, mattis quis nulla eget, rhoncus mollis tortor. Pellentesque fringilla consequat nisi egestas consectetur. Quisque consectetur facilisis sapien sit amet tincidunt. Nulla suscipit tempor lacus, nec fermentum quam efficitur ut.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras hendrerit sapien eros. Aenean turpis justo, varius ac orci sit amet, porta malesuada enim. Aliquam erat volutpat. Sed a ligula nec ligula rutrum congue. Integer
  sit amet vulputate nibh. Sed ac mollis ex, et ultricies diam.</p>
<p>Aenean vestibulum in ex vitae tincidunt. Etiam dapibus varius est sit amet facilisis. Duis a neque mi. Maecenas tempor scelerisque mattis. Quisque sapien neque, scelerisque quis velit id, vulputate consectetur eros. Aliquam erat ipsum, ultrices vitae
  purus at, fringilla imperdiet sapien. Pellentesque in tellus eleifend, ullamcorper ipsum vel, auctor purus. Quisque porttitor eu nisl ut hendrerit. Morbi facilisis eleifend tempus. Sed hendrerit quam ac auctor semper. Vivamus lacinia eros nunc, quis
  volutpat odio rhoncus et. Maecenas hendrerit est sit amet hendrerit maximus. Proin condimentum quam fringilla augue condimentum lacinia. Vestibulum luctus urna vitae neque gravida, in rutrum mi tincidunt. Donec aliquam feugiat felis, eu ornare elit
  maximus sed.</p>
Terry
  • 63,248
  • 15
  • 96
  • 118