Neomorphism vs Claymorphism
Both shape elements with a paired light and dark shadow instead of borders. The difference is whether the element is carved out of the background or resting on top of it.
Short answer: Neumorphism carves: the element is the same colour as the surface, and the shadow pair is what makes it appear raised or pressed. Claymorphism colours: each card has its own pastel fill, a 26px radius, and a shadow pair that sits entirely outside it.
What actually separates them
The shared technique is easy to miss. Both styles refuse borders and gradients, and both build depth from two shadows — a light one from one direction and a dark one from the other. That is why they get lumped together.
What separates them is the relationship to the background. A neumorphic card is the same colour as the page, so it has no edge of its own; the only thing separating it from the surface is the shadow. A clay card is a different colour from the page, so it has a clear silhouette before any shadow is applied — and because it sits on the surface rather than being cut into it, hovering can lift it 4px without breaking the illusion.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Neomorphism | Claymorphism |
|---|---|---|
| Card vs background | Identical colour | ● Own pastel fill, distinct from the page |
| Shadow | Paired light/dark, plus inset for pressed states | Paired light/dark, outer only — no inset anywhere |
| Radius | 8 to 22px | ● 26 to 28px |
| Interaction | Pressed states use inset shadows | ● Hover lifts the card 4px |
| Contrast | Labels routinely fall under 3:1 | ● Pastel fills keep text readable |
| Palette | One surface colour | ● Four pastels — blue, mint, pink, cream |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Neomorphism | Claymorphism |
|---|---|---|
| Card fill | background: var(--bg) — identical to the page |
background: #a8c8ff / #d8f0e4 / #ffe3e3 |
| Shadow | var(--up) raised pair, inset pair when pressed |
two outer shadows, light and dark, no inset |
| Radius | 8px to 22px |
26px to 28px |
| Hover | shadow direction reverses |
transform: translateY(-4px) |
When each one wins
Neomorphism wins when
- The interface is sparse and the surface is a single colour throughout — a smart-home panel, a single-purpose control
- You want physicality without colour: buttons that look pressable, switches that look moulded
- The audience sees the same screen repeatedly and learns the shadows as affordances
Claymorphism wins when
- Cards need to be distinguished from each other, which colour does instantly and shadow does not
- The content is friendly or consumer-facing, where pastel reads as approachable rather than washed out
- You need enough contrast for body copy without abandoning the soft look
Steering a model to one or the other
The single sentence that decides this is whether the element shares the background colour. Say that the card is the same value as the page and the model produces neumorphism; say the card has its own tint and a 26px radius and you get clay. Both prompts should forbid borders, because a 1px line immediately breaks either effect, and both should cap the shadow blur relative to the radius or the result reads as a soft drop shadow rather than moulded material.