20 Tailwind CSS Claymorphism

Clay is three shadow layers stacked in one box-shadow declaration, shown in Demo 01. First a large soft outer drop shadow that lifts the object off the page (something like 0 20px 40px rgba(0,0,0,.14)). Second an inset highlight in the top-left — a light, low-opacity inset shadow that reads as a rounded lip catching the light. Third an inset shade in the bottom-right that darkens the far edge so the surface curves away. Demo 02 isolates the two inset layers to prove the point: highlight alone makes the object look inflated, shade alone makes it look scooped-out, and only both together read as a solid puffy solid. In Tailwind you build this with a stacked arbitrary shadow-[...] value or a custom --tw-shadow token, keeping all three layers in a single utility so they compose as one paint pass.

Radius is the other half of the material — Demo 03 mints a working scale from 16px up to a hero 44px as CSS custom properties, then references them through Tailwind arbitrary values like rounded-[--r-lg]. The rule that stops clay looking like ordinary rounded cards is concentric radii: a child sitting inside a padded parent needs a smaller radius than the parent, matched so the inner and outer curves stay parallel. Demo 13 does this with a photo in an inset well — outer card radius minus the padding equals the inner well radius. For genuinely pillowy shapes, push toward the squircle end (Demo 17's app tiles): a large radius on a near-square box so the corners are almost superelliptical. Undersized radius reads as flat; oversized on a wide box collapses to a stadium/pill, which is what you actually want for badges and toggles in Demos 10 and 12.

Demo 04 puts two identical cards side by side that differ only in shadow strategy. Neumorphism is extruded: the object is the same colour as its background and appears pressed out of a single continuous surface, using a matched light/dark shadow pair with no real outer drop shadow. It has almost no contrast, which is exactly why it fails accessibility. Claymorphism is lifted: the object has its own fill colour, a genuine large outer drop shadow that separates it from the page, plus the inset highlight and shade for the puffy surface. So clay keeps figure-ground contrast that neumorphism throws away. Practically: if you strip the outer drop shadow and match the object colour to the page, you have drifted into neumorphism. Keep the object a distinct colour and keep the outer shadow, and you stay in clay — that is the single decision the comparison demo is built to show.

Naive clay dies in dark mode because black shadows on a dark page have nothing to darken — the object flattens, as Demo 19 shows. The fix is recalibration, not colour inversion. On a dark surface the outer drop shadow must go deeper and higher-opacity to still register, while the inset highlight becomes the load-bearing layer: a subtle light inset along the top edge is what now communicates the raised surface, because the shade layer has little room to work. Demo 19 drives this with the light-dark() CSS function so a single colour token resolves differently per scheme, meaning you declare each shadow colour once instead of maintaining two shadow stacks. Pair it with Tailwind's dark: variant only where a token genuinely needs a different value. The common bug is reusing the light-mode rgba(0,0,0,...) shadows verbatim — they vanish; you must lighten the fill and lift the highlight.

Demo 09 gives six clay buttons a real squish on the active: variant. Two things happen together on press: the object squashes vertically with something like active:scale-y-93 (and a slight scale-x bulge to fake volume conservation), and the shadow stack collapses — the large outer drop shadow shrinks and the inset shade deepens, so the button reads as pushed into the surface rather than just tinted. Animate transform and let the shadow change ride the same short transition. Keep the duration tight (roughly 80–120ms) or the press feels mushy. Do the squish on transform, never on width/height, so it stays on the compositor. Add focus-visible: ring utilities so keyboard users get the same affordance, and respect reduced motion by dropping the scale for users who ask for it — the colour and shadow change alone still signal the press.

Because clay maps depth to interaction, and a field you type into is a hole, not a hill. Demos 10 and 11 invert the material for controls: a text field, search bar and the track of a toggle switch are all rendered as inset wells — the highlight/shade order flips so the light catches the bottom edge and the top edge is shaded, reading as a scooped recess. The puffy, raised treatment is reserved for things you press out: buttons, and the knob of the switch (Demo 10's knob is a lifted pebble sliding along an inset track). Getting this backwards is the most common clay-form mistake — a raised, puffy text field looks like a button and users do not know it is editable. So: containers and actionable objects lift; anything that receives input or shows a value sinks. The floating-label input in Demo 11 keeps the recess while the label rides up on focus, so the well never loses its inset identity.

Clay is more accessible than neumorphism because it keeps figure-ground contrast — the object has its own fill and a real outer shadow, so it never blends into the page the way extruded neumorphism does. But the shadows are decorative and carry no semantic weight, so accessibility rides entirely on the underlying markup. Use real elements: a real <button> for pressable clay, a real <input> with a paired <label> for the inset fields in Demos 10 and 11, and a real <dialog> or the native popover attribute for the modal in Demo 14 so focus and Escape are browser-owned. Ensure text-on-fill contrast still meets 4.5:1 — the soft pastel clay palettes drift toward low contrast. Add focus-visible rings, because a puffy surface does not communicate focus on its own. And honour prefers-reduced-motion on the press and slide animations in Demos 09 and 16.

Skip clay when you have dense data or many simultaneous surfaces. Demo 20 puts clay tiles under a live FPS meter and shows why: animating box-shadow forces the browser to repaint the blurred shadow every frame, which tanks frame rate once several objects animate at once — the multi-layer clay shadow is expensive precisely because it is three blurs. The fix is to never animate the shadow itself; animate transform (translate/scale) instead, which stays on the GPU compositor, and reserve shadow changes for discrete state, not continuous motion. Beyond performance, avoid clay for information-dense dashboards, tables and long forms where the soft pastel palette and heavy padding waste space and lower contrast. It shines for hero cards, pricing tiers (Demo 15), app-icon grids (Demo 17) and playful product marketing — anywhere a small number of large, tactile objects carry the page. Use it decoratively, not as the chrome for everything.