What Is Claymorphism?
Claymorphism is a design trend that makes UI elements look like they're made from soft, matte clay or Play-Doh. Elements appear three-dimensional with rounded, inflated shapes, soft inner shadows, and pastel color palettes. Think of it as if your interface was sculpted from modeling clay and photographed with soft studio lighting.
The trend gained momentum in 2021-2022 alongside the broader wave of 3D design in UI, driven by improved browser rendering, Blender's accessibility, and the desire for friendly, tactile-feeling digital products.
Key Principles
1. Soft 3D Depth
Elements appear three-dimensional with soft, diffused lighting — not hard-edged 3D renders. The look is more Pixar than AutoCAD.
2. Rounded, Inflated Forms
High border-radius, puffy shapes, and rounded containers that look like they'd be soft to the touch.
3. Pastel and Muted Colors
Soft pastels — lavender, mint, peach, baby blue — with matte finishes. No glossy reflections or hard metallic surfaces.
4. Playful, Friendly Tone
Claymorphism inherently feels approachable and fun. It's hard to make clay look corporate or intimidating.
History & Origins
Claymorphism emerged from the convergence of 3D illustration trends (popularized by artists on Dribbble and Behance), the success of 3D emoji and icons in products like Apple's Memoji, and CSS capabilities that allow convincing faux-3D effects. It represents a softer evolution of skeuomorphism — suggesting physicality without literal material imitation.
Modern UI Applications & Examples
- Apple Memoji/3D emoji — Apple's 3D emoji and Memoji system has claymorphic qualities with soft, rounded 3D forms.
- Duolingo — The language app's 3D character and illustration style is quintessentially claymorphic.
- Various fintech apps — Some banking and payment apps use claymorphic 3D icons to make financial interfaces feel friendlier.
- Landing pages — Claymorphic 3D illustrations have become popular for SaaS and startup hero sections.
When to Use It
Claymorphism works for children's apps, educational platforms, casual gaming, onboarding flows, empty states, and illustration-focused elements. It's great for making complex topics feel approachable.
When Not To
Professional tools, data visualization, text-heavy interfaces, or enterprise applications. The playful tone can undermine credibility in serious contexts. CSS-only claymorphism also has limits — true 3D renders require actual 3D tools.
How to Apply It
- Use high border-radius (20px+) for rounded, soft containers
- Apply multi-layered, soft box-shadows for depth
- Choose pastel colors with slight saturation
- Add subtle inner highlights and outer shadows
- Consider 3D illustrations (Blender, Spline) for key visual elements
/* Claymorphic card */
.clay-card {
background: #E8D5F5;
border-radius: 24px;
padding: 2rem;
box-shadow:
8px 8px 16px rgba(0, 0, 0, 0.1),
-4px -4px 12px rgba(255, 255, 255, 0.6),
inset 2px 2px 4px rgba(255, 255, 255, 0.5),
inset -1px -1px 3px rgba(0, 0, 0, 0.05);
}
/* Claymorphic button */
.clay-btn {
background: #A8D8B9;
border: none;
border-radius: 16px;
padding: 14px 28px;
font-weight: 700;
color: #2D4739;
box-shadow:
4px 4px 10px rgba(0, 0, 0, 0.1),
-2px -2px 8px rgba(255, 255, 255, 0.5),
inset 1px 1px 2px rgba(255, 255, 255, 0.4);
cursor: pointer;
}
Related Styles
See also: Neumorphism, Skeuomorphism, Glassmorphism, Organic/Biomorphic Design