7

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>
Souleste
  • 1,887
  • 1
  • 12
  • 39

1 Answers1

4

Apply a linear-gradient mask to a pseudo-element behind the content:

.your-box {
   position: relative;
}

.your-box::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;

   background: red;
   mask: linear-gradient(to top, transparent, black 35%);
   backdrop-filter: blur(2px);
}

A mask is just like in Photoshop: it uses the alpha channel of the mask to obscure whatever the mask is applied to. Whatever is under an opaque part of the mask will be hidden, and whatever is under a transparent part of the mask will be visible. Naturally, semi-transparent parts of the mask will only partially hide the content below.

You can't apply the mask to the element itself without also masking the element's content. That's why we create an absolutely-positioned pseudo element underneath the actual element and set the background and apply the mask to that.

This example is suitable for a sticky header where you only need to fade out on the bottom. If you need it to fade out on all sides, you will need to you use multiple gradients in your mask, or use an SVG mask. You can read more about these in the above-linked MDN articles.

user5670895
  • 1,488
  • 17
  • 29