Add blur with CSS radial gradient

Question

I am trying to create a "focus" effect with CSS. I have managed to add some background color and use radial-gradient to create almost what I want. See the pen below (in the pen I used an img instead of a video for simplicity):

<div class="focus" />
<video src="https://some-video" />

.focus {
    top:0;
    left:0;
    position:fixed;
    z-index:100;
    height:100vh;
    width:100vw;
    background: radial-gradient(
        circle at 50% 50%,
        transparent 150px,
        rgba(0, 0, 0, 0.9) 160px
    );
}

Is there a way to add a blur filter instead of opacity?

I found this, but as mentioned in the comment on that answer, I would like a solution that would allow for dynamic content without replicating html tags (wouldn't like to have to deal with 2 video elements...)

Answer 1

You can use backdrop filter combined with mask:

.focus {
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
  height: 100vh;
  width: 100vw;
  -webkit-mask: radial-gradient(circle, #0000 150px, rgba(0, 0, 0, 0.9) 160px);
  backdrop-filter:blur(10px);
}

body  {
  background:url(https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80) center/cover;
}

<div class="focus">

</div>