Morning run
12 day streak
+2 today
Click the button — the clay squashes and stays pressed
Claymorphism
Industry-coined trend
Coined by Michal Malewicz (HYPE4 Academy) in 2021, continuing the '-morphism' naming train; Smashing Magazine gave it an independent technical treatment in 2022.
also called clay UI, claymorphic design
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.
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.
If you called it…
…you meant Claymorphism.
What makes it this — the defining signals
- Two inner shadows + one outerDepth & light
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 radiiGeometry & borders
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 objectsSurface & material
Each element has its own fill distinct from the background and visibly floats above it — nothing is extruded from the page itself.
Style brief — paste into your agent
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.
Often confused with Neumorphism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Claymorphism
Welcome back
Pick up where you left off.
Claymorphism
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.
vs Skeuomorphism: This is claymorphism because the material is an invented toy substance — no real-world object or texture is being imitated. It would become skeuomorphism if the soft volume started imitating nameable physical things — leather grain, brushed metal, a real calculator.
Full style DNA
Depth & light
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.
Geometry & borders
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.
Surface & material
Each element has its own fill distinct from the background and visibly floats above it — nothing is extruded from the page itself.
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.
Color & contrast
Milky lavenders, mints, corals, and creams — the shadows need light fills to read as volume, and the toy-like mood needs the softness.
Imagery & ornament
Inflated, smooth 3D characters and objects usually accompany the controls and set the overall toy-world tone.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | 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); | The full clay recipe: one outer + two inner shadows |
| CSS | 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); | Pressing squashes the clay: outer shadow shrinks, top light inverts |
| Tailwind | 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)] | Arbitrary shadow value carries all three layers |
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.
- The soft shadows are decorative, not state — pair pressed/selected with a color or content change, not shadow depth alone.
- 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.