NEXT-LEVEL FROSTED GLASS WITH BACKDROP-FILTER

Summary from the TLDR Web Dev newsletter

This article shows how to create a highly optimized "frosted glass" effect using CSS `backdrop-filter` and `mask-image`. The standard `backdrop-filter: blur()` only blurs elements directly behind the target, so the author introduces a technique using a larger masked element to include nearby content in the blur. This solution addresses issues like unclickable elements (using `pointer-events: none`) and flickering at the viewport edges (using a background gradient).