Blurring edges of a divider-CodePudding

I'm trying to blur the left and right edges of a divider, as the line is too harsh. Is there a way to do this with CSS? This is what the right edge currently looks like: right blur

This is my current code:

.front-name {
    position: fixed;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -30%);
    width: 80%;
    background-color: linear-gradient(to right, transparent, rgba(148, 148, 148, 0.5));
    backdrop-filter: blur(4px);
    padding-top: 15px;
    padding-bottom: 20px;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

It'd be nice for this to be a smoother transition from the blurry part of the divider to the sharp background image. I'd appreciate any input!

CodePudding user response：

Try with mask:

.front-name {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%);
  width: 80%;
  background: #fff5;
  -webkit-mask: linear-gradient(90deg, #0000, #000, #0000);
  backdrop-filter: blur(4px);
  padding-top: 15px;
  padding-bottom: 20px;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

html {
  background: url(https://picsum.photos/id/1003/800/400)
}

<div ></div>