How to apply blurness to css borders-CodePudding

.homepage .home-bottom-overlay .overlay::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    border-width: 42.5px;
    border-style: solid;
    border-color: transparent rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3) transparent;
    backdrop-filter: blur(20px);
}

Hey community I want to apply blurness in the background of this angle but the blurness is working with this.

CodePudding user response：

looks like you want a blurred border.

for border blur, you can use box-shadow: x y blur spread;

.box{
  width:100px;
  height:100px;
  box-shadow:0px 0px 10px 0px #000;
}

<div ></div>

you can learn more about that