Add blur with CSS radial gradient

user_2135738 0
Viewed 2868

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...)

css-filters css-gradients css
2 Answers

You can use backdrop-filter and clip-path. If you want to blur the inner circle you can achieve something like this:

.blur {
    top:0;
    left:0;
    position:fixed;
    z-index:100;
    height:100vh;
    width:100vw;
    backdrop-filter: blur(10px);
    clip-path: circle(40%);
}
<div class="blur">
</div>

<img src="https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80" />

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Source: MDN Web Docs

The clip-path CSS property creates a clipping region that sets what part of an element should be shown.

Source: MDN Web Docs

if you would like to apply gradient too:

.gradient, .blur {
    top:0;
    left:0;
    position:fixed;
    z-index:100;
    height:100vh;
    width:100vw;
}

.blur {
    backdrop-filter: blur(10px);
    clip-path: circle(40%);
}
.gradient {
    background: radial-gradient(
        circle at 50% 50%,
        transparent 150px,
        rgba(0, 0, 0, 0.9) 160px
    );
}
<div class="blur">
</div>
<div class="gradient">
</div>

<img src="https://images.unsplash.com/photo-1598128558393-70ff21433be0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=844&q=80" />

Just be careful with browser support.

user_55970170

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>

user_86203330
Related