frontend-visual-glassmorphism-backdrop

name	frontend-visual-glassmorphism-backdrop
description	Use when building a frosted-glass surface (sticky header, modal overlay, nav bar, card-on-image) with the CSS `backdrop-filter` property, debugging a `backdrop-filter` that silently does not blur, sizing the blur radius for a given content density, verifying that text-on-glass still passes WCAG contrast, picking a mobile-friendly fallback when GPU cost is too high, or shipping a fallback for browsers below Baseline 2024. Prevents the most common glassmorphism regressions : a `backdrop-filter` declared on a card whose ancestor has `opacity: 0.95` (the parent silently becomes a backdrop-root and clips the filter), white-on-glass body text that drops below 4 5 to 1 contrast against the bright photograph behind it (WCAG 1 4 3 fail), a 20-px blur applied to every card in an infinite scroll feed (mobile GPU melts), animating the `backdrop-filter` property itself (paint storm), missing `-webkit-backdrop-filter` for legacy Safari contexts, and stacking two `backdrop-filter` layers and getting compounded blur instead of the intended composition. Covers the CSS `backdrop-filter` shorthand and the full filter-function set (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia, url for SVG filters), the partially-transparent background-color requirement, the complete list of properties that establish a backdrop-root and break the filter (`opacity` less than 1, any `filter`, `mask`, `mask-image`, `mix-blend-mode`, `clip-path`, another `backdrop-filter`, `will-change` for any of these, `isolation: isolate`, `contain: paint`, `contain: layout`, `contain: strict`, and stacking-context triggers like `transform`, `perspective`, `filter`, `position: fixed`), the `-webkit-backdrop-filter` prefix status (no longer required as of 2024 but harmless), the `@supports (backdrop-filter: blur(1px))` graceful-degradation gate, the contrast-preservation rule for text on glass, the mobile-perf budget for blur radius, and the `prefers-reduced-transparency` opt-out per WCAG. Keywords: backdrop-filter, backdrop-root, blur, saturate, brightness, contrast, glassmorphism, frosted glass, -webkit-backdrop-filter, glassmorphism CSS, filter-effects, stacking context, isolation, contain, will-change, opacity, mix-blend-mode, mask, clip-path, prefers-reduced-transparency, supports backdrop-filter, WCAG 1 4 3, backdrop-filter not working, glass effect not working, text unreadable on glass, blurred background not showing, Safari blur missing, mobile slow with blur, paint storm, compositor cost, how do I make a glass effect, frosted glass CSS, backdrop blur, glassmorphism in CSS, what is backdrop-filter, why is my backdrop-filter ignored, why is my blur not working, how to make a sticky frosted header
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

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.