glassmorphismlisted

# Glassmorphism Glassmorphism builds an interface out of frosted panes suspended over color and light. Surfaces are translucent, the layer behind them blurs into soft bloom, and a faint white edge catches the light like the rim of real glass. The result feels modern, airy, and premium — depth without weight. Reach for it when you want a product to feel luminous and tactile, especially over photography, gradients, or rich brand color. Done well, it gives even a simple dashboard the sense of looking through layered, polished glass. ## Design principles - Translucency over opacity: surfaces let a blurred version of what's behind them show through. - Always pair glass with a colorful or textured backdrop — glass over flat gray has nothing to refract. - Light defines edges: a thin bright border and inset highlight sell the "glass" illusion. - Layer with intent — stack panels so blur and shadow imply real distance between them. - Keep type and icons high-contrast and solid so they stay legible over the busy backdrop. - Use soft, generous radii; sharp corners break the liquid-glass feeling. - Treat blur as a material with thickness — heavier blur means a thicker, more frosted pane. ## Color The foundation is a deep `#0B1020` night background, ideally carrying a multi-stop gradient and a couple of soft glowing orbs in `#7C5CFF` (violet) and `#22D3EE` (cyan), with `#F472B6` (pink) for warmth. Surfaces are not solid colors but translucent white `rgba(255,255,255,0.08)` with `backdro