UI that feels like clay — oversized rounded corners, candy pastel colors, and 3D depth that makes every element look squishy and alive.
Every element shaped by clay: puffed up, colorful, and satisfying to press.
Press any button — feel the squish animation. Each color has calibrated shadow depth.
Interactive Like Button
Five soft, cheerful colors chosen for maximum clay warmth. No dark tones. No neons. Pure pastel joy.
Clay Pink
#f8b4d9
Warm Cream
#fef3c7
Mint Green
#a7f3d0
Lavender
#c4b5fd
Golden Yellow
#fcd34d
All-Color Gradient
Combining all five palette colors produces a signature claymorphism rainbow gradient. Use sparingly for hero and accent surfaces.
The clay 3D illusion comes from combining an outer offset shadow with an inner highlight. Here are four depth levels, side by side.
Flat
No depth — just a solid color block with no shadow.
Clay
Standard clay shadow: outer drop + inner highlight shine.
Deep Clay
Exaggerated depth for hero elements, buttons, CTAs.
Soft Bloom
Blurred shadow gives airy, cloud-like floating effect.
.clay-element {
/* Standard clay depth */
box-shadow: 8px 8px 0px 0px rgba(0,0,0,0.13),
inset 0 2px 4px rgba(255,255,255,0.6);
border-radius: 24px;
}
.clay-element:hover {
box-shadow: 12px 12px 0px rgba(0,0,0,0.15),
inset 0 2px 4px rgba(255,255,255,0.6);
transform: scale(1.04);
}
.clay-element:active {
box-shadow: 4px 4px 0px rgba(0,0,0,0.1),
inset 0 2px 4px rgba(255,255,255,0.5);
transform: scale(0.97);
}
Six defining characteristics that separate claymorphism from every other design style.
Soft, cheerful pastels that feel edible and playful.
Combined inner + outer shadows simulate real clay volume.
Extreme border-radius — nothing has a sharp edge.
Press animations make UI feel physically touchable.
Pastel gradients add softness and dimension to surfaces.
White inset highlight at top edge simulates clay sheen.
The rules that keep your clay UI looking authentic — and the traps that break the spell.
xAnti-pattern: sharp, flat, dark
✓Clay pattern: rounded, soft, 3D