Visual style reference · web UI aesthetic
Neumorphism
A soft, extruded aesthetic using dual shadows on a matching background to create pushed-in or popped-out forms with low contrast.
Back to the visual style atlas01 · CSS hints
How to build it in CSS
background: #e0e0e0; border-radius: 12px; box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
02 · Coding-agent prompt
What to tell your agent
Create a neumorphic card on a matching gray background. Use two box-shadows — one dark, one light — to make the card appear pressed into or raised from the surface. Keep contrast high enough for accessibility.
03 · When to use
Good fits for Neumorphism
Minimal dashboards or settings panels; music-player controls; low-information-density interfaces where tactile feel matters.
04 · When to avoid
Skip Neumorphism when…
Any interface requiring clear visual hierarchy or WCAG contrast compliance; data-dense screens; forms with critical error states.
References
Sources
Frequently asked questions
Neumorphism: common questions
Direct answers based on the reviewed behavior contract above.
What is the Neumorphism visual style?
A soft, extruded aesthetic using dual shadows on a matching background to create pushed-in or popped-out forms with low contrast. 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: background: #e0e0e0; border-radius: 12px. Adjust colors and values to match your brand.
When should I avoid using Neumorphism?
Any interface requiring clear visual hierarchy or WCAG contrast compliance; data-dense screens; forms with critical error states. Always verify that the visual style serves the user task before committing to an aesthetic.
Name the UI element too