Do not apply filter css to child element

Question

I want to do a modal window, but I wanted to do something different, something out of the pattern opacity. I wanted to wear a filter: blur();, but I wanted to do in tag body and would take all the elements inside the tag body ...

Is there any way to block the filter:blur(); in a child element?

Answer 1

No, the blur is a filter, so there is no way to undo, note that even applying filter: none will not work, see an example just to understand the problem (This is not the solution, it’s a test):

html, body {
    height: 100%;
}
.main {
    min-height: 100%;
    background: url(https://i.stack.imgur.com/Pk9BV.jpg);
    -webkit-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: blur(5px);
}

.main .content {
     filter: none;
}

<div class="main">
     <div class="content">xxxx</div>
</div>

---

How to solve

It is possible simulate one background using position: relative;+position: absolute;

Would look like this:

Note that in the .main you can put anything, text, image, etc, and on .main-bg will be the elements you want to apply the filter, such as blur for example

html, body {
    height: 100%;
}

.main-bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: url(https://i.stack.imgur.com/Pk9BV.jpg);
    -webkit-filter: blur(5px);
        -ms-filter: blur(5px);
            filter: blur(5px);
}

.main {
    position: relative;
    z-index: 101; /*posiciona acima do */
}

<div class="main">
     foo bar baz foo bar baz foo bar baz<br>
     foo bar baz foo bar baz foo bar baz<br>
     foo bar baz foo bar baz foo bar baz<br>
     foo bar baz foo bar baz foo bar baz<br>
     <img src="https://i.stack.imgur.com/Pk9BV.jpg">
</div>
<div class="main-bg"></div>

Answer 2

Yes, using the delete selector :not():

body > *:not(#elemento_nao_afetado) {
  filter: blur(5px);
}

body > *:not(#modal) {
  filter: blur(5px);
}

<p>texto texto</p>
<br />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" />
<br />
<div id="modal" style="display: block; width: 200px; height: 100px; background: yellow; position: absolute; top: 0; left: 200px;">
   <p>modal não afetado pelo blur</p>
</div>