Claymorphism Design: How to Get That Playful 3D Look Without It Looking Cheap
Soft, inflated, almost squishy — claymorphism is that friendly 3D look Notion and Headspace use. It's much harder to get right than it looks. Here's what actually makes it work.
You've seen claymorphism even if you didn't have a name for it. Those soft, puffy, slightly inflated shapes — like everything was molded out of digital clay. Notion uses it in their illustrations. Headspace built a whole brand around it. It reads as friendly, approachable, a little playful.
It's also one of the easiest styles to do badly. Claymorphism design depends on a few specific properties working together, and when an AI tool only nails one or two of them, the result looks less like clay and more like a regular card with a drop shadow bolted on.
What actually defines it
Real claymorphism is built on three things happening at once:
Inflated, rounded shapes. Big, generous border radius — much rounder than normal UI. The shape should feel puffy, like it has air inside it.
Dual inner shadows. This is the part most people miss. Claymorphism uses inset shadows — one light, one dark — inside the element to create the soft, molded depth. The depth comes from inside the shape, not just from an external drop shadow.
Soft outer shadow. A gentle shadow underneath grounds the element, but it's subtle. Soft and diffuse, never harsh.
The inner shadows are the whole game. Without them you get a rounded card with a drop shadow, which is the AI default and the reason most attempts look cheap.
Where it fits
Kids' apps, wellness and meditation products, playful brands, onboarding flows, empty states, illustration-heavy marketing pages. Anywhere a warm, approachable, non-corporate feel is the goal. It's a poor fit for dense, data-heavy, or formal interfaces where the playfulness would undercut the content.
Getting it right with AI
To get real claymorphism out of an AI tool, you have to specify the inset shadows explicitly — both the light and dark values, with their blur and spread — plus the oversized border radius and a soft outer shadow. A vague prompt like "make it look like clay" gets you rounded corners and nothing else.
The color choice matters too. Claymorphism works best with soft, slightly desaturated pastels. Saturated or pure colors fight the soft physical quality the style is going for.
The skill file
The Skills UI claymorphism skill has the full recipe pre-written — inset shadow values, border radius, outer shadow, and palette guidance. Drop it into Claude, Cursor, Lovable, or Bolt and the output looks intentionally molded instead of accidentally rounded.
Download the Claymorphism skill →