Backdrop blur

Backdrop blur blurs everything behind an element rather than the element itself. The panel stays razor sharp; the page scrolling under it turns to frosted glass. On the web that is CSS 'backdrop-filter: blur()', and it is the engine behind Apple's translucent materials and the whole glassmorphism look.

Use it where a floating surface has to sit over unpredictable content: sticky headers, nav bars, sheets, command palettes, video controls. It keeps a sense of what is underneath while killing enough detail that text on top stays readable. Blur alone is never enough; the recipe is blur plus a semi-transparent tint (roughly 8 to 20% of a light or dark base) plus a 1px hairline border to define the pane's edge, and often a faint noise layer so it does not look like plastic.

Gotchas pile up here. Contrast is not fixed, since a bright photo sliding underneath can erase your text; test against worst-case content and bump the tint opacity. The panel's own fill has to stay at least partly transparent, since a fully opaque background paints straight over the blurred backdrop and you see none of it. It is a real GPU cost, so on long lists it can stutter. And 'prefers-reduced-transparency' users should get a solid fallback.