Rounded 3D-inflated shapes, pastel colors, and soft shadows that give UI elements a clay-like physical depth. The friendly tech aesthetic — used by Duolingo, fintech for younger audiences, and no-code tools that want to feel approachable.
What Is Claymorphism?
Claymorphism is a UI style where elements feel physically sculpted from soft material — inflated surfaces, thick colored shadows, rounded geometry, and tactile interactions that simulate real-world depth.
Unlike neumorphism, which often feels subtle and abstract, claymorphism embraces visible physicality. Buttons feel pressable. Cards feel molded. Interfaces feel emotionally warm and approachable.
The defining feature is the compressed colored shadow system:
box-shadow: 0 6px 0 0 #1D4ED8
This creates the illusion that the object has thickness and is physically resting on a surface.
Combined with fast press animations and inflated geometry, the interface becomes tactile instead of purely visual.
The Vibe
Sculpted from clay. Lit with soft daylight. Built to be touched.
Claymorphism creates emotional softness through physical depth.
The goal is not realism. The goal is tactile friendliness.
Interfaces should feel:
- Soft
- Responsive
- Dense
- Rounded
- Safe
- Energetic
The difference between good and bad claymorphism is restraint.
Good claymorphism:
- Feels premium
- Uses depth intentionally
- Maintains hierarchy
- Stays readable
Bad claymorphism:
- Looks like toy UI
- Overuses gradients
- Uses random floating blobs
- Has no spacing discipline
- Feels visually noisy
Who Is Using It?
Duolingo is the clearest mainstream example of claymorphism principles in action — large pressable buttons, rounded geometry, saturated but soft colors, and tactile interaction feedback.
The style is also common in:
- Wellness apps
- Habit trackers
- Education platforms
- Kids-adjacent consumer products
- Creative tools
- Modern no-code interfaces
Brands use it to reduce intimidation and increase emotional engagement.
When Should You Use It?
Use it when:
- Your product needs emotional warmth
- You want users to feel safe interacting
- Your audience is consumer-focused
- Your interface benefits from tactile feedback
- Your brand values approachability over authority
It works especially well for:
- Education
- Wellness
- Productivity for beginners
- Gamified systems
- Creator-focused tools
Avoid it for:
- Enterprise software
- Serious fintech
- Developer tooling
- Dense analytics products
- Professional authority-driven interfaces
Claymorphism trades seriousness for emotional accessibility.
Design Rules (Deep Dive)
The Clay Shadow Formula
This is the foundation of the entire style.
Use a two-layer shadow system:
First layer:
0 6px 0 0 [darker-shade]
This creates the compressed contact depth.
Second layer:
0 12px 20px rgba(0,0,0,0.12)
This adds environmental softness.
The first shadow must:
- Be solid
- Use minimal blur
- Match the object hue
- Feel dense and compressed
Never use neutral gray shadows on colorful elements.
The Press Animation
Claymorphism becomes believable through motion.
Hover:
- Slight compression
- Reduced shadow depth
- Small downward movement
Active:
- Full press into surface
- Contact shadow disappears
- Element feels physically compressed
Fast transitions are critical. Slow animations ruin the tactile illusion.
Round Everything
Roundness creates softness.
The moment sharp geometry appears, the clay illusion breaks.
Use heavily rounded:
- Cards
- Inputs
- Badges
- Navigation items
- Buttons
- Modals
The interface should feel molded from one material language.
Pastel Over Neon
The palette should feel emotionally soft.
Good claymorphism colors:
- Medium saturation
- Slight warmth
- Daylight-friendly
- Matte
Bad claymorphism colors:
- Neon
- RGB primaries
- High-contrast cyberpunk palettes
- Overly glossy gradients
Think: soft toy packaging, not gaming RGB hardware.