Apply blur effect to parent container only

Question

Goal: I want the background to blur when the user clicks on a form. So that the user attention is fully drawn to the form.

Problem: Unfortunately everything on the screen (parent div container and the form) is blurred.

Question: What do I have to do so that only the parent container blurs but not the box with the input field?

My code:

.container {
  width: 900px;
  margin: 0 auto;  
}

.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
}

.container:focus-within {
  filter: blur(4px);
}

<div class="container">
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div class="box">
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

@connexo Great! Just in this moment i thinking about the pseudoclass `:not`. Thank you for comment. That is exactly what i want. Too bad you can't make a reply so I can upvote and accept it. I would want to give you several upvotes for it!!! 5 minimum :-) But thanks anyway and see you soon! — Maik Lowrey, Mar 21 '22 at 11:39
@JCode It does on my Firefox/MacOS. Firefox has had full support for filter since version 35. https://caniuse.com/css-filters Firefox also supports selector lists for `:not()` since version 84: https://caniuse.com/css-not-sel-list — connexo, Mar 21 '22 at 11:57
@connexo I just checked - they added it 5 days ago - my timing is insanely bad :) — JTinkers, Mar 21 '22 at 11:59
@JCode No, they added it years ago. To be more precise, full support was added on February 9, 2015. — connexo, Mar 21 '22 at 12:01
@connexo My bad, I meant backdrop-filter - not just filter. Sorry for wasting your time. — JTinkers, Mar 21 '22 at 12:37

score 3 · Accepted Answer · answered Mar 21 '22 at 11:55

Instead of blurring the whole container (which will always affect all descendants), you can blur direct children and define exceptions using the pseudo class :not(selector):

.container {
  width: 900px;
  margin: 0 auto;  
}

.box {
  padding: 40px 1px;
  margin: 0 auto;
  width: 500px;
  background: gray; 
  text-align:center;
}

.container:focus-within>*:not(.box, input) {
  filter: blur(4px);
}

<div class="container">
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <div class="box">
    <div>
      <input >
      <input >
    </div>
  </div>
  <p>some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again some text again</p>
  <input >
</div>

Thank you conneco for your good answer! Was very helpful. Related to my question above i had a new one. Maybe you can help me again? https://stackoverflow.com/questions/71571078/in-scale-the-bottom-blurred-element-overlaps-the-scaled-element — Maik Lowrey, Mar 22 '22 at 11:13
Hey! If you have time can you take a look to this question, please? https://stackoverflow.com/q/71599989/14807111 — Maik Lowrey, Mar 24 '22 at 09:35

Apply blur effect to parent container only

1 Answers1

Linked

Related