iklas February 2016

How can i make a blur effect on overlay

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/

Answers


elmarko February 2016

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.


Terry February 2016

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 el 

Post Status

Asked in February 2016
Viewed 2,433 times
Voted 6
Answered 2 times

Search




Leave an answer