glassmorphism
Glassmorphism
Build a material whose translucency reads as a lit pane of glass while text stays legible and controls stay usable. Premium glass comes from a backdrop that carries light, a thin light fill, one locked light direction expressed through rim, highlight and shadow, and a stabilized plate under dense content. It never comes from raising blur or opacity.
Establish the material's job
Read the brief and the existing interface for platform, surface roles, reading density, who owns the backdrop, themes, and target devices. Preserve the project's components, typography, tokens and interaction conventions. Infer routine choices; this skill adds no approval step or planning artifact.
Separate three layers before styling: environment behind the interface, content people read or manipulate, chrome that navigates or controls it. Glass needs a reason to reveal the environment. Over flat color the blur has nothing to sample and the surface becomes a gray box; use a tinted solid there, or compose a backdrop with a luminance ramp when the brief allows one.
| Surface | Starting decision | Change it when |
|---|---|---|
| Floating toolbar, dock, tab bar, compact media or map control | Glass capsule; icons on the material, selected state as a denser chip | Uncontrolled imagery or device cost defeats legibility |
| Glanceable widget (weather, metric, now playing) | Glass card with large light numerals and short labels; ink chosen by backdrop luminance | Copy grows past a few short lines: add a plate or go solid |
| Popover, sheet, command palette, settings panel | Glass shell with a stabilized plate under fields, rows and code | Sustained reading: solid panel |
| Table, editor, long text, chart labels, forms | Solid reading plane; optional glass around it | Only after measuring the composite behind the text |
| Primary action, errors, important status | Stable foreground/background pairing and recognizable states | A native platform control already supplies verified material |
| Blocking modal backdrop | Dimming scrim | A measured, purposeful effect justifies more rendering |