Soft, inflated, 3D clay-like UI design. Elements look as if molded from Play-Doh, floating above the background with puffy, tactile surfaces and vivid pastel colors.
Visual Characteristics
Every element should look like it could be physically picked up or squeezed. Claymorphism evokes stuffed toys, balloons, and Play-Doh forms through a precise combination of color, shadow, and shape.
Objects resemble air-filled, softly sculpted forms with chunky, rounded shapes. No sharp edges anywhere.
Elements float above backgrounds rather than extruding from them, using outer shadows for separation and depth.
Dual inner shadows plus an outer shadow create the signature clay/puffy illusion -- the defining CSS technique of this aesthetic.
Bright pastels and vivid hues differentiate interactive elements, improving accessibility over monochromatic approaches.
Bold, rounded typefaces balance the whimsical 3D clay visuals with readability and minimal aesthetic purity.
Organic, blob-like formations throughout the UI evoke a sense of playfulness and physical touchability.
Color Palette
Claymorphism demands bright pastels and vivid colors. Drop shadows become ineffective on darker variations, so foregrounds and backgrounds stay in the lighter pastel range.
Typography
Claymorphism typography should be rounded, bold, and clean -- matching the organic clay aesthetic. Sans-serif only; angular serifs clash with the rounded clay forms.
Shadow Construction
The core visual effect relies on combining two inset shadows (one dark, one light) with one outer shadow. Here is how each layer contributes to the final clay appearance.
Positive X/Y offsets create the floating/depth effect. Use the base color darkened at 30-45% opacity.
Negative X/Y creates concavity and volume. Use the base color darkened 20-30% at 30-70% opacity.
Positive X/Y creates the highlight and inflation. Use the base color lightened heavily at 50-90% opacity.
Layout Principles
Clay elements need ample room to breathe. Large border-radii, generous padding, centered card-based layouts, and soft color transitions are essential.
Ample padding inside elements (40-60px) and generous gaps between them. Clay elements need room to breathe.
Floating card elements on a soft background. Centered, with max-width containers of 900-1100px to prevent over-stretching.
30-50px on cards, 16-24px on buttons, fully rounded (999px) on pills and avatars. No sharp corners anywhere.
Use soft color transitions between sections rather than hard dividers. Group related content in clay cards.
Create hierarchy through element size and shadow depth. More important items get deeper, more prominent shadows.
The clay effect needs visual breathing room. Limit claymorphic layers to prevent visual clutter.
Interactive Components
Claymorphic components use the triple-shadow system on every interactive element -- buttons, inputs, toggles, badges, and cards -- to maintain the cohesive puffy aesthetic.
Vivid surfaces with matching shadow hues
Inner shadows create inflated volume
Badges & Pills
Warm, vivid variation with hue-matched shadows.
Combining clay shadows with glass transparency for depth.
Using HSL functions for systematic color derivation.
Maintain clear visual hierarchy despite the 3D effect. Keep backgrounds light and bright so drop shadows remain effective. Respect motion preferences to avoid overwhelming animations.