Visual style reference · web UI aesthetic
Glassmorphism
A frosted-glass aesthetic with background blur, semi-transparency, and subtle light borders that create a sense of depth and layering.
Back to the visual style atlas01 · CSS hints
How to build it in CSS
backdrop-filter: blur(); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 32px rgba(0,0,0,0.1);
02 · Coding-agent prompt
What to tell your agent
Build a frosted-glass card with backdrop blur, semi-transparent background, and a subtle white border. Layer it over a colorful gradient or image to reveal the glass effect.
03 · When to use
Good fits for Glassmorphism
Over colorful backgrounds to create depth; modal overlays and floating panels; dashboards needing visual layering without heavy borders.
04 · When to avoid
Skip Glassmorphism when…
Low-contrast backgrounds where blur is invisible; accessibility-critical interfaces where blur reduces readability; high-performance constraints (blur is GPU-intensive).
References
Sources
Frequently asked questions
Glassmorphism: common questions
Direct answers based on the reviewed behavior contract above.
What is the Glassmorphism visual style?
A frosted-glass aesthetic with background blur, semi-transparency, and subtle light borders that create a sense of depth and layering. It is one of 13 reviewed web UI visual aesthetics in this reference set.
How do I tell my coding agent to use this style?
Copy the prompt snippet above and paste it into your agent. The key CSS properties are: backdrop-filter: blur(); background: rgba(255,255,255,0.1). Adjust colors and values to match your brand.
When should I avoid using Glassmorphism?
Low-contrast backgrounds where blur is invisible; accessibility-critical interfaces where blur reduces readability; high-performance constraints (blur is GPU-intensive). Always verify that the visual style serves the user task before committing to an aesthetic.
Name the UI element too