Visual style reference · web UI aesthetic
Claymorphism
A soft, plush 3D style with chunky rounded corners, thick inner and outer shadows, and a toy-like inflated appearance.
Back to the visual style atlas01 · CSS hints
How to build it in CSS
border-radius: 24px or larger; box-shadow: inset 2px 2px 2px rgba(255,255,255,0.5), 8px 8px 16px rgba(0,0,0,0.1); background: smooth pastel gradients; thick borders.
02 · Coding-agent prompt
What to tell your agent
Design a claymorphic element with large rounded corners, a soft pastel gradient background, an inner highlight shadow for the top-left edge, and a soft drop shadow. Give it an inflated, squeezable appearance.
03 · When to use
Good fits for Claymorphism
Onboarding and educational flows; children's apps; SaaS landing pages aiming for a friendly feel; call-to-action cards needing visual prominence.
04 · When to avoid
Skip Claymorphism when…
Data-heavy dashboards; forms with many inputs where chunky elements waste space; interfaces requiring precise alignment or compact density.
References
Sources
Frequently asked questions
Claymorphism: common questions
Direct answers based on the reviewed behavior contract above.
What is the Claymorphism visual style?
A soft, plush 3D style with chunky rounded corners, thick inner and outer shadows, and a toy-like inflated appearance. 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: border-radius: 24px or larger; box-shadow: inset 2px 2px 2px rgba(255,255,255,0.5), 8px 8px 16px rgba(0,0,0,0.1). Adjust colors and values to match your brand.
When should I avoid using Claymorphism?
Data-heavy dashboards; forms with many inputs where chunky elements waste space; interfaces requiring precise alignment or compact density. Always verify that the visual style serves the user task before committing to an aesthetic.
Name the UI element too