how do i blur the div only and not its elements

Question

    <style type="text/css">
.inner-container{
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur{

    z-index: 20;
}
.box{
    position:absolute;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}
</style>    

<div class="inner-container">
            <div class="box">
                <div id="noblur">
                    <h1> Login </h1>
                    <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
                    <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
                    {% if error is defined %}
                        <span class="error">{{ error }}</span>
                    {% endif %}
                <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>

                </div>
          </div>
        </div>

i want to blur the box only and not the elements inside it ,i tried to remove the blur from the "noblur" div with setting the blur to 0 but nothing happened css result of the page

You can draw background using a pseudo element and apply blur on it instead of the element itself. — Mohammad Usman, Oct 27 '17 at 08:21
Have you seen the following [SO Question / Answer](https://stackoverflow.com/questions/22406478/remove-blur-effect-on-child-element)? This might help. — , Oct 27 '17 at 08:22
As Mohammad Usman said, the only option is to fake it by actually blurring another element/pseudo element. Unfortunately you can't unblur the children of a blurred element. — delinear, Oct 27 '17 at 08:23

score 0 · Answer 1 · answered Oct 27 '17 at 08:28

Blurring any element will always blur all children inside. One workaround is to have blur effect on an element that sits below your content element.

.inner-container {
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur {
    z-index: 20;
}
.blurbox {
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0.13);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    z-index: 1;
}
.box {
    position:absolute;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    padding:30px 0px;
    z-index: 2;
}

    <style type="text/css">

</style>    

<div class="inner-container">
  <div class="blurbox"></div>
  <div class="box">
    <div id="noblur">
      <h1> Login </h1>
      <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
      <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
      {% if error is defined %}
          <span class="error">{{ error }}</span>
      {% endif %}
  <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>
    </div>
  </div>
</div>

Why not use a pseudo element? The blur is not semantic and has no meaning to the structure/content of the page therefore should not be in the HTML - it's entirely presentational so a CSS-only solution would be better. — Tom Oakley, Oct 27 '17 at 08:43
am a lazy ass , so i prefer putting all my elements inside a div and apply some css to it , not to apply css to each element one by one — Medy, Oct 27 '17 at 09:24

score 0 · Accepted Answer · answered Oct 27 '17 at 08:28

0

Unfortunately, if you blur (or use transparancy) on an element, this will effect all child elements as well.

The only way around this is to take the contents of the blurred box and place it as a sibling. Than use some CSS to position it on top.

answered Oct 27 '17 at 08:28

JasperZelf

2,731
1
22
34

Saurav Rastogi · Answer 3 · 2017-10-27T08:36:41.860

Use pseudo element (:before) and give blur to .box:before using CSS positioning. Also, give #noblur a position because z-index works with positioning. Like:

#noblur {
    position: relative;
    z-index: 20;
}

.box {
    position:relative;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    z-index: 2;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:rgba(0,0,0,0.13);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 0;
}

Have a look at the working snippet below:

.inner-container{
    width:400px;
    height:400px;
    position:absolute;
    top:calc(50vh - 200px);
    left:calc(50vw - 200px);
    overflow:hidden;
}
#noblur{
    position: relative;
    z-index: 20;
}
.box{
    position:relative;
    height:100%;
    width:100%;
    font-family:Helvetica;
    color:#fff;
    background:rgba(0,0,0,0.13);
    padding:30px 0px;
    z-index: 2;
}
.box:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://images.pexels.com/photos/207171/pexels-photo-207171.jpeg?w=940&h=650&dpr=2&auto=compress&cs=tinysrgb');
  background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  z-index: 0;
}

<div class="inner-container">
            <div class="box">
                <div id="noblur">
                    <h1> Login </h1>
                    <input type="text" name="Pseudo" onkeyup="inputValid()" id="usrId" class="form-control" placeholder="Pseudo" />
                    <input type="password" name="Password" id="pwdId" class="form-control" placeholder="Password"  />
                    {% if error is defined %}
                        <span class="error">{{ error }}</span>
                    {% endif %}
                <input type="submit" id="btnCnx" style="border:0;" class="btn btn-success" /><br/>

                </div>
          </div>
        </div>

Hope this helps!

Its my pleasure @Medy . If this answer helped you out please upvote & accept this answer. — Saurav Rastogi, Oct 27 '17 at 09:37

how do i blur the div only and not its elements

3 Answers3