How to create a focus blur effect in css?

Question

I am trying to create a focus effect with blur but i faced a huge problem. :)

I need something like this:

Focus effect

But all examples in internet are about blocks with fixed position. Clip-path and radial-gradient doesn't work if position of element is absolute. My block has 700px height and I can scroll it.

The only effect I reached:

No blur effect

But I want to see blurred literas.

Is it possible?

Here what I tried (short version):

<div class="black-promo">
  <div class="black-promo__blur"></div>
</div>

.black-promo {
  background: black;
  position: relative;
  height: 700px;


  &__blur {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: radial-gradient(circle, #0000 150px, rgba(45, 45, 45, 0.9) 300px);
  }
}

Try number 2:

https://codepen.io/Nnekkka/pen/xxagZQQ

Answer 1

Generally what you want to do is to cut out a hole in your overlay element, and apply the backdrop-filter property on the overlay, to blur what's under it. Here's an example cutting out a hole with with the mask property. Note it needs a vendor prefix (-webkit-) for Chrome.

https://codepen.io/andrewray/pen/JjaEGOa

.div-with-hole {
  position:absolute;
  top:0;
  height: 100vh;
  -webkit-mask: radial-gradient(50px, #0000 98%, #000);
          mask: radial-gradient(50px, #0000 98%, #000);
  width: 100%;
  backdrop-filter: blur(10px);
  background:rgba(255, 0, 0, 0.1);
}