3

I'm looking to blur the overall 100% background behind a fixed modal that pops up on a button click.

I'd have thought it'd just be a blur filter, but it seems to only cover a small portion of the screen. I've tried adding 100vh height + width, and setting the position as fixed with top: 0, left: 0 but the elements aren't centering right.

To be clear - I'm wanting the background elements behind the modal to be blurred, so the section behind it but the modal in focus.

Here's the HTML (not sure much point but posting anyway):

That's all I've coded so far - want to do this before adding the rest in. Any tips would be great. Cheers!

.blog-modal-section {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

.blog-modal-container {
  height: 40%;
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
<section class="blog-modal-section">
  <div class="blog-modal-container">
    <div class="blog-modal-content">
      <h2>My blogs</h2>
      <ul>
        <li>
          <a href="#">Blog 1 - Coming Soon</a>
        </li>
      </ul>
    </div>
  </div>
</section>

3
  • But where is your modal? Your question is not clear. Apr 21, 2020 at 21:18
  • The modal is centred in the middle of the screen. That's the point of the modal - and the display flex, with align-items and justify-content set as centre. The modal section covers the whole viewport, the modal container contains the actual contents of the modal. I want the modal section to blur the background, but have 0 opacity. I can't set it. Apr 21, 2020 at 21:23
  • Sorry, think I explained it wrong - imagine the modal section covers the whole viewport. The contents behind it (i.e. rest of the webpage) is visible behind it, like it's see-through, but it's blurred. The modal container is centred dead central in the middle of the modal section. That is completely visible, and not blurred. Apr 21, 2020 at 21:29

1 Answer 1

5

The following would make a screen-filling element that also adds blur.

.bg{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(15px);
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.