Claymorphism
黏土风
Aliases:黏土风黏土拟物软糖质感设计膨胀立体卡片3D黏土按钮橡皮泥风格Clay 3DPuffy UI
What is it
A visual language that molds controls from soft clay: generous radii on pastel grounds, with a double shadow — an inner concave plus an outer inflated drop — so elements feel like air-puffed clay: round, plump, squishable. A tactile middle ground between neumorphism and 3D cartoon.
Design spec
Typography
Rounded sans
Color
Lavender base #EDF0FF, white cards, violet #6C7BFF
Border
Borderless with 22px+ radius
Shadow
Outer + inset shadows create the clay feel
Spacing
Puffy spacing, elements float apart
Motion
180–240ms soft elastic press transitions; honour prefers-reduced-motion
States
Hover lifts and deepens the outer shadow; focus shows a visible violet ring; active becomes an inset press; disabled flattens and desaturates; error uses a coral inset
Style in action
See the full page, then try the interactive sceneFull-page preview
Soft & Squishy
A little squeeze, a little joy.
Inner shadows · Rounded corners · Candy colors
Give it a squeeze →Bounce back on press
Soft edges all around
Low-saturation surfaces
Interactive scene
Loading demo…
✓ When to use
- Kids, education and casual games that want approachable tactility
- Relaxed social and consumer brands signaling cuteness and ease
- Mobile touch interactions that want tactile feedback
✕ When not to use
- Professional, fintech and enterprise contexts — clay reads unserious
- Dense dashboards where inflated shadows eat space and focus
- Heavy dark-mode usage where pastel inflation is hard to sustain
Variants
Soft Clay
软黏土
Classic pastel with the inflated double shadow
Candy Clay
糖果黏土
Saturated jelly tones close to game UI
Dark Clay
深色黏土
Matte clay on dark grey, inflation kept
Implementation
border-radius: 20pxbox-shadow: inset 0 -6px 12pxbox-shadow: 0 12px 24pxpastelInflation formula = big radii (20–32px) plus three shadows: a large blurred same-hue drop (e.g. 0 14px 28px at 35% of the base color), an inner bottom press (inset 0 -8px 16px), and an inner top light (inset 0 3px 6px white). Tinted shadows must stay in-family — never grey. On press, shrink the drop and deepen the inner shadow to feel squeezed. Dark clay uses deep grey with a darker same-hue drop.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Implement inflated clay buttons and cards in the current project. Inspect the existing design tokens and shadow variables first; express the inflation parameters as configurable variables. Requirements: - Big radii + triple shadow (tinted drop, inner bottom press, inner top light) for the clay inflation - Pressed state shrinks the drop and deepens the concave — a squeezing feel - Tinted same-family shadows only, never muddy grey - Compliant text contrast; dark mode with matte deep-grey clay - Respect prefers-reduced-motion for any motion - No new dependencies Run existing project checks when done and list the modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that expresses floating layers as frosted glass: a blurred backdrop (backdrop-filter), a low-opacity fill and a thin white rim of light. Panels literally reveal the vivid background beneath them, so the style is about depth — it only works over rich, colorful content worth revealing.
StylesSimilarA loud visual language of thick black outlines, saturated clashing colors and hard offset shadows: elements sit on the page like bold stickers, paired with chunky radii and punchy badges. It deliberately rejects polish and subtlety, trading refinement for instant recognition and a rebellious, playful voice.
StylesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsAffectsA self-contained rectangular container outlined by rounded borders or a surface colour, aggregating related content: cover, title, excerpt and actions. The universal display unit of content feeds, dashboards and commerce lists.
ComponentsAffectsA small status marker attached to an element's corner or inline: a dot, a count or a short label. It signals unread counts, status (new, deprecated) or category; non-interactive and visually subordinate to its host element.
ComponentsAffects