Blur the whole page except a div

Question

I have the following code.

I need to have it all blurred except the red div in the center.

I tried using filter:none or filter:blur(0) but that don't work. How can I blur everything in the background except the red div?

edit: I tried using it with z-index too, that does not work either.

.container{
  width:100%;
  height:100%;
  min-height:400px;
  position:relative;
  filter: blur(0.5rem);
  z-index:1;
}
.text{
  width:50%;
}
.center{
  width:200px;
  height:200px;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#f00;
  z-index:10;
  filter: blur(0);
  filter: none;
}

<div class="container">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
    <div class="center"></div>
</div>

Does this answer your question? [remove blur effect on child element](https://stackoverflow.com/questions/22406478/remove-blur-effect-on-child-element) — Arun A S, Feb 01 '20 at 16:40
No that did not work either, I updated the question with that answer's code — Nnie, Feb 01 '20 at 16:45
in the question I linked, first you make an overlay for your `.container` div and apply blur to this overlay, then give it a `z-index`, say `10px`. Then give your `.center` a z-index of `20px`. This should accomplish what you're trying to achieve (btw `z-index` only works on positioned elements, so make sure to give them a `position:relative` or `position:absolute` or whichever suits your needs.). Its not a solution to your issue, but will help you achieve your end result — Arun A S, Feb 01 '20 at 16:54
Is there a reason you can't use backdrop-filter? https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter — Thomas Riley, Feb 01 '20 at 17:00
Thanks for your comment, I will use `:not` here, that works easily — Nnie, Feb 01 '20 at 17:01

score 6 · Accepted Answer · answered Feb 01 '20 at 16:57

You should use not for this.

If you use .container div:not(.center) your problem should be solved.

.container div:not(.center){
  width:100%;
  height:100%;
  min-height:400px;
  position:relative;
  filter: blur(0.5rem);
  z-index:1;
}
.text{
  width:50%;
}
.center{
  width:200px;
  height:200px;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#f00;
  z-index:10;
  filter: blur(0);
  filter: none;
}

<div class="container">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
    <div class="center"></div>
</div>

The `div:not` solution doesn't work when the center div contains nested divs. — Devabc, Jun 23 '21 at 19:16

score 0 · Answer 2 · edited Aug 09 '21 at 07:34

You can add one more sub-div and add blur to it. It's working to my code.

.container {
  width: 100%;
  height: 100%;
  min-height: 400px;
  position: relative;
}

.subcontainer {
  filter: blur(0.5rem);
}

.text {
  width: 50%;
}

.center {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #f00;
  /* filter: blur(0); */
  /* filter: none; */
}

<div class="container">
  <div class="subcontainer">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
  </div>
  <div class="center"></div>
</div>

AlainPre · Answer 3 · 2020-02-01T17:23:18.057

Here is finally a case where the selector * can be useful:

body * {filter:blur(8px);}
.center {filter:none;}

I had to move the red div out of the container

body * {filter:blur(8px);}
.center {filter:none;}

.container{
  width:100%;
  height:100%;
  min-height:400px;
  position:relative;
  z-index:1;
}
.text{
  width:50%;
}
.center{
  width:200px;
  height:200px;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:#f00;
  z-index:10;
  filter: none;
}

<div class="container">
    <div class="title">
      <h1>
        some text
      </h1>
    </div>
    <div class="text">
      <p>
        some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred. some text goes here that is blurred...
      </p>
    </div>
</div> 
<div class="center"></div>

Finally? Universal selector is useful in a lot of cases. But I wouldn't use it for this when the `:not()` selector is really what you want. — Stephen M Irving, Feb 01 '20 at 18:35

score -2 · Answer 4 · edited Aug 09 '21 at 18:58

Try adding blur effect only to the inner elements instead of the parent element ("container" class). Below CSS must work:

.container {
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
  }
  .title {
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
  .text {
    width: 50%;
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
  .center {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f00;
  }

Blur the whole page except a div

4 Answers4

Linked