How to fade edges of backdrop-filter blur

Question

I want to fade the edges of an element that has a transparent background and backdrop-filter: blur() on it.

Normally, when using the backdrop filter the edges are crisp and straight.

So basically, I want less blur towards the edges.

.blur,
.behind-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blur {
  backdrop-filter: blur(1px);
}

.behind-blur {
  width: 100px;
}

<div class="behind-blur">le le le le le le le le le le le le le le le le le le le le le le le le</div>
<div class="blur">la la la la la</div>

Answer 1

I'm not 100% sure what you mean by fading the edges, but in order to reduce blur, you need to decrease backdrop-filter: blur(1px); - try backdrop-filter: blur(0.5px); You can read more about blur() here.

Edit:

You should be able to use CSS Radial Gradients to create a gradient from the center of the div and become more transparent to the outer edge. Here is an example of a gradient using transparency. If the background were red, you could do background-image: radial-gradient(rgba(255,0,0,1), rgba(255,0,0,0));