Faded Box Backdrop Blur

Imagine box-shadow but for a blur effect, where the backdrop of an element is blurred around the that element, gradually going from blurry to crisp.

Such an effect can increase the focus on the element which drops the blur, by creating more contrast between it and its backdrop, especially if they happen to be in similar color shades.

There is no native way of doing with the CSS beside combining a few tricks together to simulate such an effect

Steps to create the effect

1. Create an HTML element within the the one which harbors the effect. Best to use a pseudo-element for such a thing, so not to involve any markup changes.
2. Position the pseudo-element so it occupies the whole area of its parent plus some extra, so the blur “spills” outside the area of the container and will be visible, since the container should not be blurred
3. Give that element backdrop-filter: blur(...)
4. Apply -webkit-mask & mask on the element, with a specific value with multiple gradients
5. Apply -webkit-mask-composite: source-in (for non-standard Chrome support) and mask-composite: intersect (for non-chromium browsers) to the masked pseudo-element, to marge the pixels of the gradients in such a way that they don’t add to each-other but simply merge to their average, so only areas where both gradients apply to are visible, and this is crucial having the mask fade-out blur backdrop-filter in a somewhat realistic way.

The Mask’s Gradients:

Two gradients, one vertical and the other horizontal, both go from transparent, to a color, and back to transparent. The colored region should be prominent - occupy most of the area.

linear-gradient(to top, transparent 0%, black 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, black 18% 82%, transparent 100%)

-webkit-mask-composite: source-in / intersect Applied:

As mentioned in step 5:

Combining Everything:

Note that in the above Codepen example I am using a mask with these percentage values:

linear-gradient(to top, transparent 0%, red 25% 75%, transparent 100%),
linear-gradient(to left, transparent 0%, red 18% 82%, transparent 100%);

Wherever the fill color is irrelevant (like in this case), I tend to use "red" as it's the shortest color name. Another thing to note are the percentages 25% 75% & 18% 82%. These roughly correspond the aspect ratio of the popup box, which gives a more “balanced” look to the blur effect between the horizontal sides and vertical sides.