Frontend Visual : Glassmorphism + backdrop-filter

This skill is the operational reference for shipping CSS backdrop-filter-based glassmorphism in evergreen-2026 browsers. It covers the property syntax, the partially-transparent background requirement, the full set of backdrop-root triggers (the single most common reason a backdrop-filter silently does nothing), contrast preservation against the blurred backdrop, the mobile performance budget, the @supports gate for pre-Baseline-2024 browsers, and the prefers-reduced-transparency opt-out. The skill does NOT cover gradients (see [[frontend-visual-gradients]]), micro-interaction motion (see [[frontend-visual-micro-interactions]]), light-dark() theming, or React component wrappers.

Quick Reference

Floor rules

• ALWAYS set a partially-transparent background-color on the glass element. NEVER omit ; without a translucent surface the filter has nothing to blur and the element appears solid.
• ALWAYS audit the ancestor chain for backdrop-root triggers when a backdrop-filter does not blur. NEVER assume the rule is malformed before checking parents : opacity < 1, any filter, mask, mix-blend-mode, clip-path, another backdrop-filter, isolation: isolate, or contain: paint / layout / strict on any ancestor breaks the effect.
• ALWAYS verify text-on-glass meets WCAG 1 4 3 (4 5 to 1 normal, 3 to 1 large) against the EFFECTIVE backdrop (the blurred + tinted result), not against the declared token. NEVER ship body text on a translucent surface without measuring contrast in the live page.
• ALWAYS gate on @supports (backdrop-filter: blur(1px)) AND provide a solid-color fallback. NEVER ship a glass surface that becomes transparent on browsers below Baseline 2024.
• ALWAYS provide a prefers-reduced-transparency: reduce branch that replaces the glass with a solid surface and drops the blur. NEVER ignore the user signal.
• ALWAYS budget blur radius for mobile : 8 to 16 px max for animated or frequently-painted surfaces. NEVER set blur(40px) on a sticky element above a scrolling photograph on mid-range mobile.
• ALWAYS keep backdrop-filter on a single layer per stack. NEVER nest two backdrop-filter elements ; the inner one establishes a backdrop-root and the outer one only sees the inner's solid surface.
• ALWAYS animate opacity or transform, never backdrop-filter itself. Animating the filter triggers a per-frame backdrop re-sample (paint storm).

Decision tree 1 : Glass versus solid + opacity ?