Glassmorphism
Frosted translucent panels over a vivid backdrop, lit edges, soft depth.
What it feels like
Like looking through frosted bathroom glass — hazy, light, layered, with content floating above the background.
Why it works
The blur turns a busy background into soft color, so your content pops without extra weight; the translucency hints at a layer above, giving depth.
How to tell AI
Frosted-glass navbar: backdrop-filter blur 12px, 70% white tint, 1px translucent white border; fall back to a solid background where unsupported.
Signals
- · Translucent panel + background blur
- · Color bleeding through softly
- · Thin light border or highlight edge
- · Stacked sheets with depth
Don't confuse with
Neumorphism is opaque soft relief; iOS HIG is system list language; flat has almost no blur bleed.
Style brief
Paste into your coding agent
Visual style: Glassmorphism. Frosted translucent panels over a vivid backdrop, lit edges, soft depth. Defining signals: - Translucent panel + background blur - Color bleeding through softly - Thin light border or highlight edge - Stacked sheets with depth Do not confuse with: neumorphism, ios-human, flat-design. Neumorphism is opaque soft relief; iOS HIG is system list language; flat has almost no blur bleed. Implementation brief: Use glassmorphism: frosted translucent panels (backdrop-filter: blur), vivid colorful backdrop showing through, thin light border (rgba white ~0.3), soft shadow. Keep text high-contrast on the glass. Avoid solid opaque cards. Keep scope to visual language and components styling; do not redesign product information architecture unless asked.