Claymorphism 黏土拟态
Claymorphism makes UI elements look molded from soft modeling clay: fat rounded corners, a light pastel fill, and the signature construction — two inner shadows (a bright one catching the top edge, a darker one shading the bottom) plus one soft outer drop shadow that floats the object above the page. Each element is independently colored and clearly separate from the background, usually paired with chunky 3D 'clay' illustrations.
黏土拟态让 UI 元素看起来像用软陶土捏出来的：肥肥的圆角、淡淡的粉彩填充，还有标志性的结构——两层内阴影（亮的一层落在顶边，暗的一层垫在底部）加一层柔和的外投影，把物体托浮在页面上方。每个元素独立上色、与背景明显分离，通常再配上一组胖乎乎的 3D「黏土」插画。
Scope: This entry covers the UI treatment. The matching 3D character-illustration style (inflated Blender people with smooth plastic skin) travels with it but is an illustration fashion, not an interface style.
范围：本条目涵盖 UI 处理方式。与之配套的 3D 人物插画风格（皮肤光滑如塑料的充气 Blender 小人）常和它一起出现，但那是插画潮流，不是界面风格。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Two inner shadows + one outer两层内阴影 + 一层外阴影 depth defining定义特征
The signature recipe: a light inner shadow on top, a darker inner shadow at the bottom, and a soft drop shadow below — the surface reads as inflated, not carved.
标志性配方：顶部一层亮内阴影，底部一层暗内阴影，下面再加一层柔和的投影——表面看起来是充气鼓起来的，不是被雕刻进去的。
-
Oversized corner radii超大的圆角半径 geometry defining定义特征
Corners are dramatically round — radii around a third of the element's height — so every shape reads as a soft blob, never a card with rounded corners.
角圆得很夸张——半径约为元素高度的三分之一——所以每个形状都是一坨软块，绝不是「加了圆角的卡片」。
-
Independently colored, floating objects独立上色、悬浮的物体 surface defining定义特征
Each element has its own fill distinct from the background and visibly floats above it — nothing is extruded from the page itself.
每个元素都有区别于背景的填充色，并且明显浮在背景上方——没有东西是从页面本身挤出来的。
-
Light pastel palette浅色粉彩配色 color supporting辅助特征
Milky lavenders, mints, corals, and creams — the shadows need light fills to read as volume, and the toy-like mood needs the softness.
奶感的薰衣草紫、薄荷绿、珊瑚粉和奶油色——阴影需要浅填充才能读出体积感，玩具般的气质也需要这份柔软。
-
3D clay illustration3D 黏土插画 imagery supporting辅助特征
Inflated, smooth 3D characters and objects usually accompany the controls and set the overall toy-world tone.
充气般光滑的 3D 角色和物体通常与控件结伴出现，奠定整体的玩具世界基调。
-
Element same color as background元素与背景同色 surface avoid避免
If the object's fill matches the page and only shadows imply its shape, you've slid into neumorphism — clay objects are their own color.
如果物体的填充和页面一样、只靠阴影暗示形状，你就滑进新拟态了——黏土物体有自己的颜色。
Often confused with: Neumorphism最容易混淆：新拟态
Claymorphism黏土拟态
Neumorphism新拟态
This is claymorphism because each puffy element is independently colored and FLOATS above the background on a real drop shadow.
这是黏土拟态，因为每个鼓鼓的元素都独立上色，并且靠一道真实的投影浮在背景之上。
It would become neumorphism if every element took the background's exact color and sat flush in the surface, with only dual light/dark shadows implying shape — molded from one continuous material instead of placed on it.
如果每个元素都完全用背景的颜色、与表面齐平嵌进去，只靠一明一暗两层阴影暗示形状——像是从一整块连续材料里长出来的，而不是放在上面——就变成新拟态了。
In code — optional starting points代码写法 —— 可选起点
The full clay recipe: one outer + two inner shadows
border-radius: 26px; background: #f4e7fd; box-shadow: 0 20px 36px rgba(120,90,180,.22), inset 0 -8px 14px rgba(120,90,180,.18), inset 0 6px 12px rgba(255,255,255,.65);Pressing squashes the clay: outer shadow shrinks, top light inverts
active: box-shadow: 0 8px 16px rgba(120,90,180,.2), inset 0 -4px 8px rgba(120,90,180,.22), inset 0 10px 14px rgba(120,90,180,.12);Arbitrary shadow value carries all three layers
rounded-[26px] bg-violet-100 shadow-[0_20px_36px_rgba(120,90,180,.22),inset_0_-8px_14px_rgba(120,90,180,.18),inset_0_6px_12px_rgba(255,255,255,.65)]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using claymorphism. Defining signals: the clay shadow recipe on cards and buttons — two inner shadows (light at top, darker at bottom) plus one soft outer drop shadow, e.g. box-shadow: 0 24px 40px rgba(x,.18), inset 0 -8px 16px rgba(x,.15), inset 0 8px 16px rgba(255,255,255,.55); oversized corner radii (border-radius roughly 26px on a 56px control); each element independently colored in light pastels, clearly floating above a soft tinted background; chunky friendly type. Keep the exact hues and illustration flexible. Do not drift into neumorphism: the decisive difference is that clay objects have their own color and a visible drop shadow — never the background's color with shadows alone implying shape. Preserve 4.5:1 text contrast on pastel fills, pressed/hover states that deepen the inner shadows rather than removing them, and visible focus rings.
用黏土拟态创建这个界面。决定性特征：卡片和按钮上用黏土阴影配方——两层内阴影（顶亮底暗）加一层柔和的外投影，例如 box-shadow: 0 24px 40px rgba(x,.18), inset 0 -8px 16px rgba(x,.15), inset 0 8px 16px rgba(255,255,255,.55)；超大的圆角半径（56px 高的控件配约 26px 的 border-radius）；每个元素用浅色粉彩独立上色，明显浮在柔和着色的背景之上；字体粗壮友好。具体色相和插画保持灵活。不要滑向新拟态：决定性区别在于黏土物体有自己的颜色和一道可见的投影——绝不能用背景色加纯阴影来暗示形状。在粉彩填充上保持 4.5:1 的文本对比度，pressed/hover 状态要加深内阴影而不是删掉它们，焦点环要可见。
Accessibility & misuse可访问性与误用
Pastel-on-pastel is the trap: white or cream text on mint/lavender fills usually fails 4.5:1 — darken the text, not the toy palette.
粉彩配粉彩是陷阱：薄荷绿、薰衣草紫填充上放白色或奶油色文字，通常过不了 4.5:1——要加深的是文字，不是玩具感的配色。
The soft shadows are decorative, not state — pair pressed/selected with a color or content change, not shadow depth alone.
柔和的阴影是装饰，不是状态——pressed/selected 要配颜色或内容变化，不能只靠阴影深浅。
Triple-layer shadows on many elements can shimmer on scroll in low-power mode; keep the recipe to key surfaces.
大量元素叠三层阴影，在低功耗模式下滑动时可能会闪；这个配方只留给关键表面。
Origin起源
Named in 2021 by Michal Malewicz as the friendlier successor to neumorphism, riding the wave of soft-3D illustration in fintech and edtech marketing; the recipe (two inner shadows + one outer, oversized radii) comes from his original article.
2021 年由 Michal Malewicz 命名，定位是新拟态更友好的继任者，乘着金融科技和教育科技营销里软 3D 插画的浪潮走红；配方（两层内阴影加一层外阴影、超大圆角）来自他的原始文章。