Back to Hub
Design Sample / Claymorphism Go to Hub

Claymorphism

A friendly UI with a soft, squishy three-dimensional feel like marshmallows or modeling clay. By combining dual shadows, elements appear to float while maintaining a gentle, inflated volume from within.

Soft & Friendly

An experience of harmless curves with no sharp straight lines

Interact

Dual Shadows

Drop shadow (outer) + deep inner shadow (inner)

Inflate

AI Request Prompt

Design an extremely soft and squishy Claymorphism-style dashboard.

Requirements:
1) Background: A slightly warm tone rather than pure white (#e8eaed or beige light gray)
2) Card corners: Very round corners with 30-50px border-radius
3) Shadows must use two types simultaneously (key point):
   - Outset (outer): 15px 15px 30px rgba(0,0,0,0.08), -15px -15px 30px rgba(255,255,255,1)
   - Inset (inner): inset 10px 10px 15px rgba(255,255,255,1), inset -10px -10px 15px rgba(0,0,0,0.05)
4) Buttons: Convex clay/candy feel, accent colors (coral #ff8b7e, sky #a2c2ff) + inner highlight shadow
5) Icon blocks: Square with 20px radius, accent color background + inner highlight
6) Font: Nunito (700/900), round and friendly impression
7) Hover: translateY(-5px), 0.3s ease transition

Responsive:
- Mobile: Cards in 1-column stack
- Desktop: max-width 1050px, cards auto-fit minmax(280px, 1fr)

Restrictions:
- No sharp right-angle corners
- No flat single shadows only (must use outset+inset dual shadows)
- No dark mode (light only)

Output:
1) Claymorphism CSS variables (outset/inset shadows, corners, colors)
2) Hero / card grid (2 columns) / UI layout with CTA
3) HTML/CSS code with responsive support