How can I modify my CSS so that the edges of my blocks are feathered?

Question

How can I modify my CSS so that the edge of my box is a feathered blur effect? I hope that the background of the box has a frosted glass effect, instead of sharp edges around it, there is a feathering effect, which can gradually blend in with the background, but I don’t know how to rewrite the current CSS. I hope I can get your help, thank you.

.wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1625&q=80');
  background-size: cover;
  .box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background-color: red;
    border-radius: 50%;
    background-color: rgba(225, 225, 225, 10%);
    backdrop-filter: blur(2px);
  }
}

<div class="wrap">
  <div class="box"></div>
</div>

Looks like you want a [drop shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow) — Tangentially Perpendicular, Aug 16 '23 at 04:39
Does this answer your question? [How to feather the edges of an image using CSS](https://stackoverflow.com/questions/26638385/how-to-feather-the-edges-of-an-image-using-css) — Sumit Surana, Aug 16 '23 at 04:40

score 0 · Answer 1 · answered Aug 16 '23 at 05:42

0

What I am understand just add below any one code snippet:

box-shadow: inset 2px 2px 15px #fff; // OR box-shadow: inset 2px 2px 15px rgba(255,255,255,.5)

answered Aug 16 '23 at 05:42

user3302090

177
3

How can I modify my CSS so that the edges of my blocks are feathered?

1 Answers1