How to blur(css) div without blur child element

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?

Does this idea help: http://codepen.io/Dzomba/pen/npdfh (ie can you put the unblur on the child element) — Taryn East, Mar 10 '15 at 23:07
http://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, Mar 10 '15 at 23:12
@TarynEast good, can i use instead of .blur:hover another selector? — ggoha, Mar 10 '15 at 23:31
@nevermind, now button in div, and i am not sure what i am change include — ggoha, Mar 10 '15 at 23:33
You can always use another selector... rather than asking - why don't you give it a try and see what happens? — Taryn East, Mar 10 '15 at 23:36
@TarynEast may be i do anything wrong, becouse nothing to do — ggoha, Mar 10 '15 at 23:52
Already been answered. http://stackoverflow.com/questions/22406478/remove-blur-effect-on-child-element — user3735633, Mar 13 '15 at 10:08
This might help you http://stackoverflow.com/a/20039965/2236219. There is no other option of doing it without position and without making children. — Manwal, Mar 17 '15 at 14:14
have you considered looking into the experimental feature backdrop filter? it applies a filter to everything behind an element. https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter — Bjamse, Feb 14 '19 at 20:29

score 76 · Answer 1 · edited Nov 26 '19 at 22:14

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.

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 — serraosays, Nov 06 '19 at 18:05

score 32 · Accepted Answer · answered Mar 11 '19 at 13:59

32

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 '19 at 13:59

qwabra

2,094
2
15
23

1

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. – Brandon Hill Nov 28 '20 at 17:45
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). – aderchox May 20 '22 at 17:52
today, i checked this code snippet, it still works. last chrome – qwabra May 22 '22 at 05:47

score 11 · Answer 3 · answered Jun 15 '20 at 17:23

11

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 '20 at 17:23

Carson Stevens

180
2
6

Only works for rather new browsers, FF >=70, otherwise good idea! – Zaphoid Jul 22 '20 at 21:15
1

Should be OK for most applications as of Oct 2022 (see [can i use](https://caniuse.com/css-backdrop-filter)) – LukasKroess Nov 08 '22 at 08:19

score 6 · Answer 4 · edited Jan 11 '18 at 05:12

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>

How to blur(css) div without blur child element

4 Answers4

Linked

Related