20 CSS Claymorphism

Claymorphism is the puffy, pastel, soft-3D style where every surface looks like it was moulded from clay — large rounded corners, saturated but gentle colours, and objects that appear inflated and floating slightly above the page. In CSS it comes down to one box-shadow declaration carrying three layers at once: a large soft outer shadow that lifts the object off the background, an inset shadow on the side away from the light that gives it volume, and an inset highlight on the lit side that makes the surface look rounded rather than flat. Drop any one of the three and the effect collapses — outer only reads as a plain floating card, insets only reads as a pressed well. Demo 01 assembles all three one step at a time so you can see exactly what each layer contributes.

They are opposites, which is why swapping one for the other never works. Neumorphism is a same-background mirrored shadow pair: the element is exactly the colour of its parent, a dark shadow falls one way and a light shadow the other, and the illusion is that the surface was extruded out of the page. Nothing floats, and the moment the element's colour differs from its parent the effect dies. Claymorphism is the reverse — the object is a different, usually saturated colour from its ground, it has a genuine outer drop shadow so it clearly floats above the page, and its two inset shadows inflate it rather than blending it in. Practically: neumorphism needs a flat ground the same colour as the element, clay works on any ground and wants contrast. Neumorphism also has a well-known contrast problem at its boundary; clay largely avoids it because the object is a different colour to begin with. Demo 04 renders both side by side on the same background, labelled.

As a single declaration with three comma-separated layers, in this order: the outer drop shadow first, then the dark inset, then the light inset. Something like box-shadow: 0 18px 32px -12px [tinted-dark], inset -8px -8px 16px [shade], inset 8px 8px 16px [highlight]. Three details separate a convincing result from a muddy one. The outer shadow should be tinted toward the object's own hue rather than neutral grey or black, which is what makes clay feel warm instead of dirty. The inset offsets must point in opposite directions and agree with wherever you decided the light is coming from. And the highlight wants to be lighter and slightly more transparent than the shade is dark, because a symmetrical pair reads as plastic. Demos 01 and 02 cover the assembly and the inset pair specifically.

Larger than feels right at first, and scaled to the element rather than fixed. A puffy shape generally needs a radius somewhere around a third of the element's smaller dimension — a 48px button wants roughly 16px, a 300px card wants far more than the 12px a normal card would take. The failure mode is applying one radius token across every size, which leaves small controls looking merely rounded while large surfaces look under-inflated. The second rule is that inset shadow blur must stay proportional to the radius: a large radius with a tight inset produces a hard rim rather than a soft roll, and a small element with a large inset blur has no room to resolve the highlight at all, which is why clay badges under about 24px tall usually need the inset dropped entirely. Demo 03 walks the scale, and demo 12 shows where the badge floor sits.

Two ways, and which one you want depends on whether you are prototyping or shipping. For a quick result, the whole effect fits in a single arbitrary-value utility — a shadow-[...] with all three layers comma-separated inside the brackets, paired with a generous rounded-* and a background colour. That is fine in a playground but unreadable in a codebase and impossible to keep consistent across a team. For real work, define the shadow once as a theme token — in Tailwind v4 that means a @theme entry — and use it as a named utility everywhere, so the light direction and blur scale stay identical across every clay surface in the project. Demo 08 prints the exact strings for both approaches next to live components, and the demo itself renders in plain CSS mirroring the compiled output so it runs without a build step.

Because inverting a light clay palette produces mud, for the same reason it does in neumorphism but with an extra complication: clay's outer shadow is tinted to the object's hue, and a tinted shadow that worked on a pale ground turns into a dirty smear on a dark one. Three adjustments fix it. The outer shadow needs to become both darker and considerably more transparent, since on a dark background it is doing far less work — the object separates by lightness instead. The inset highlight has to be dimmed and tightened, because a bright highlight that read as a soft roll on pastel reads as a hard plastic glare on a dark surface. And depth should come partly from fill lightness rather than shadow alone, raising each tier's surface lightness a few percent, since shadows cannot carry four distinct depth tiers on a dark page. Demo 19 puts the naive inversion beside a properly recalibrated set.

Yes, and clay makes it worse than most styles because every surface carries three shadow layers instead of one. Animating box-shadow forces a repaint on every frame, and a grid of clay tiles all transitioning their blur will drop frames on a mid-range phone even though it looks fine on a desktop. The fix is to avoid animating the shadow at all: put the motion on transform, which the compositor handles without repainting, and if the shadow genuinely must change, pre-render both states on stacked pseudo-elements and cross-fade their opacity instead of interpolating blur radii. Demo 20 runs both approaches under a live FPS meter with a long-frame counter so the difference is measured rather than asserted.

It starts from a better position than neumorphism, because a clay object is a different colour from its background and therefore has a real boundary — which is exactly what neumorphism lacks. The risks are elsewhere. Pastel palettes drift toward low text contrast, so body text on a clay surface still needs the full 4.5:1 and large text 3:1; a soft lilac label on a soft lilac card fails easily. Interactive boundaries need 3:1 under WCAG 2.2 SC 1.4.11, and a shadow does not supply it, so keep a real edge on controls. Do not signal state through depth alone — a raised-versus-pressed shadow change is not perceivable to everyone and needs a colour, text or icon change alongside it. And :focus-visible should be a genuine visible ring rather than a shadow swap. Demo 09 keeps a real focus ring through the press states, and demo 08's contrast notes cover the palette side.