How to blur(css) div without blur child element (and without absolute) [duplicate]

Question

.content {
  float: left;
  width: 100%;
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
}

.info {
  float: left;
  margin: 100px 0px 0px 30px;
  width: 410px;
}

<div class="content">
  <div class="opacity">
    <div class="image">
      <img src="images/zwemmen.png" alt="" />
    </div>
    <div class="info">
      a div wih all sort of information
    </div>
  </div>
</div>

If I do not want to blur the button, what do I need to do?

I would like to solve the problem without resorting to absolute positioning

Does this idea help: codepen.io/Dzomba/pen/npdfh (ie can you put the unblur on the child element) — Taryn East
– Taryn East, Commented Mar 10, 2015 at 23:07
jsfiddle.net/L8ksa46g/5 if button mustn't be a child element.... maybe something like this? p.s. button is inside row, but outside .col-lg-3? — sinisake
– sinisake, Commented Mar 10, 2015 at 23:12
@TarynEast good, can i use instead of .blur:hover another selector? — ggoha
– ggoha, Commented Mar 10, 2015 at 23:31
@nevermind, now button in div, and i am not sure what i am change include — ggoha
– ggoha, Commented Mar 10, 2015 at 23:33
Already been answered. stackoverflow.com/questions/22406478/… — user3735633
– user3735633, Commented Mar 13, 2015 at 10:08

Roko C. Buljan · Accepted Answer · 2019-11-26 22:14:08Z

77

When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.

There is an alternate solution: create two elements inside your parent div – one div for the background and another div for the contents. Set position:relative on the parent div and set position:absolute; top:0px; right:0px; bottom:0px; left:0px; (or set height/width to 100%) to the child element for the background. Using this method, the content div will not be affected by properties on the background.

Example:

#parent_div {
  position: relative;
  height: 100px;
  width: 100px;
}

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  filter: blur(3px);
  z-index: -1;
}

<div id="parent_div">
  <div id="background"></div>
  <div id="textarea">My Text</div>
</div>

If you see the background masking over the content, then use the z-index property to send the background behind the second content div.

edited Nov 26, 2019 at 22:14

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

answered Mar 25, 2015 at 7:07

Ashish Panwar

1,1283 gold badges11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

serraosays Over a year ago

Great solution to a silly problem. Why can't you just override filter on children - not sure I understand why this property breaks CSS inheritance rules

qwabra · Accepted Answer · 2019-03-11 13:59:06Z

37

How to disable blur on child element?

.enableBlur>* {
  filter: blur(1.2px);
}

.disableBlur {
  filter: blur(0);
}

<div class="enableBlur">
  <hr>
  qqqqq<br>
  <span>qqqqq</span><br>
  <hr  class="disableBlur">
  <div>aaaaa</div>
  <div>bbbbb</div>
  <div class="disableBlur">DDDDD</div>
  <hr>
  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>

answered Mar 11, 2019 at 13:59

qwabra

2,1942 gold badges17 silver badges24 bronze badges

4 Comments

Brandon Hill Over a year ago

Thanks for this. I was missing the >* part which is key: apply blur to the children individually rather than to the parent, that way children can individually un-blur.

aderchox Over a year ago

Is this a bug or I'm making a mistake? I do .parent { filter: blur(1px); } and then .parent > * { filter: blur(0); } but children are still blurred. Even the computed styles in the dev tools says they are blur(0), but they are still visually blurred (on Chrome).

qwabra Over a year ago

today, i checked this code snippet, it still works. last chrome

valoukh Over a year ago

This is brilliant, although the disableBlur class only seems to be effective on direct children. Put <div class="disableBlur">DDDDD</div> inside another div and it stays blurred. I have yet to find a way un-blur a grandchild.

Carson Stevens · Accepted Answer · 2020-06-15 17:23:09Z

14

My solution seems a bit simpler but may have some compatibility issues. I just used backdrop-filter with the blur filter.

backdrop-filter: blur(2px);

answered Jun 15, 2020 at 17:23

Carson Stevens

3503 silver badges6 bronze badges

2 Comments

Zaphoid Over a year ago

Only works for rather new browsers, FF >=70, otherwise good idea!

LukasKroess Over a year ago

Should be OK for most applications as of Oct 2022 (see can i use)

Sumit patel · Accepted Answer · 2018-01-11 05:12:57Z

6

Just create two divisions and adjust their z-indexes and margins such that the division you want to blur lies below the division you want to appear on top.

PS: Don't create division inside a division cause the child inherits the parent's properties.

#forblur {
  height: 200px;
  width: 200px;
  background-color: blue;
  margin: auto;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px) -ms-filter: blur(3px);
  filter: blur(3px);
  z-index: -1;
}

#on-top-container {
  margin: auto;
  margin-top: -200px;
  text-align: center;
  height: 200px;
  width: 200px;
  z-index: 10;
}

<div id="forblur">
</div>
<div id="on-top-container">
  <p>TEXT</p>
</div>

edited Jan 11, 2018 at 5:12

Sumit patel

3,91111 gold badges38 silver badges65 bronze badges

answered Sep 20, 2015 at 9:19

Cyclops Blue

691 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to blur(css) div without blur child element (and without absolute) [duplicate]

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Linked

Related