CODEWITHSUNDEEP
htmlcssshadowbackdrop
AWEI
AWEI

Reputation: 427

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

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>

Upvotes: -2

Views: 186

Answers (1)

Jignesh Dalvadi
Jignesh Dalvadi

Reputation: 175

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)

Upvotes: 0

Related Questions