Set blur effect on container but not a specific element within

Question

How can I apply filter: blur(20px) to a div with class todo, but not the div with class modal?

Is it possible, perhaps with the help of SCSS?

Code:

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    <div class='modal'>
      <span>12345</span>
    </div>
  </div>
</div>

Codepen

score 2 · Answer 1 · answered Nov 03 '20 at 12:03

You could wrap the modal in a container and use backdrop-filter:

.todo {
  position: relative;
  display: grid;
}

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  backdrop-filter: blur(5px);
  height: 100vh;
  width: 100%;
}

.modal {
  display: grid;
  width: 500px;
  height: 200px;
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>

    <div class="modal-container">
      <div class='modal'>
        <span>12345</span>
      </div>
    </div>
  </div>
</div>

Though, the support is not great.

Another option is to use JS:

document.querySelector('ul').style.filter = 'blur(5px)';

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
    <div class='modal'>
      <span>12345</span>
    </div>
  </div>
</div>

Or, you could swap them around in the HTML and use the sibling selector (~):

.todo {
  display: grid;
}

.modal {
  display: grid;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.modal ~ ul {
  filter: blur(5px);
}

<div class='todo'>
  <div class='todo__sidebar'>
    <div class='modal'>
      <span>12345</span>
    </div>

    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </div>
</div>

None of these are ideal but just some options if you need them.

score 0 · Answer 2 · answered Nov 03 '20 at 11:58

You cannot "unblur" a child element of a blurred element.

Typically, rendering an element via CSS or SVG can conceptually be described as if the element, including its children, are drawn into a buffer (such as a raster image) and then that buffer is composited into the elements parent.

-- Filter Effect Module Level 1

* Emphasis mine.

You will need to apply filter only on the element you want blurred. Checkout anwsers in How to blur (css) div without blur child element and How to apply a CSS filter to a background image.

What OP is asking can be achieved. – dippas Nov 03 '20 at 12:38 — dippas, Nov 03 '20 at 12:38

Corné · Answer 3 · 2020-11-03T12:03:54.590

You have to remove the div with class modal as a child of todo so that it is on top of that div. Here is the code that works:

.todo {
  display: grid;
  filter: blur(20px);
}
    
.modal {
  display: grid;
  z-index: 1000;
  position: fixed;
  width: 500px;
  height: 200px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fafafa;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
  visibility: visible;
  opacity: 1;
}

<div class='todo'>
  <div class='todo__sidebar'>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
    </ul>
  </div>
</div>
<div class='modal'>
     <span>12345</span>
</div>

Set blur effect on container but not a specific element within

3 Answers3