6 Pure CSS1 with JSPublished 2026-10-05Free · no sign-up
Seven playful clay components: a puffy card, a button that squishes when pressed, a set of pastel app icons, a sunken text field, a toggle with a clay knob, statistic tiles and a profile badge with a floating avatar.
A soft, puffy card that looks moulded from clay: big rounded corners, a pastel fill, an outer shadow for lift and two inset shadows, a light one on top and a dark one at the bottom, that give the surface its rounded volume.
A chunky pastel button with clay shading that squishes when pressed, flattening slightly with a transform and reversing its inner shadows. The bright fill and dark text keep it readable.
A row of rounded square icons in different pastel clays, each with the same shading recipe in its own hue. The shadow colour is a custom property per icon, so one set of shadow rules keeps the whole set consistent.
A rounded clay input that looks pressed into the surface with inverted inner shadows, plus a puffy Go button beside it. A strong focus ring keeps it accessible, since soft shading alone does not show focus well.
A pill switch with a clay knob that slides across a sunken track, turning the track green when on. It is a role="switch" button with aria-checked, and the colour change is backed by the knob's position.
var b = document.querySelector('.cly5');
b.onclick = function () { b.setAttribute('aria-checked', b.getAttribute('aria-checked') !== 'true'); };
06. Clay Stat Tiles
ClaymorphismData
Three statistics in rounded clay tiles of different colours, a friendly way to show numbers in a kids' or wellness app. Each tile pairs the number with its label in a description list group.
A playful profile badge with a clay avatar circle floating above a clay card, the 3D-illustration look of many modern apps. The avatar is decorative and the person's name is the card's heading.
Claymorphism combines an outer shadow for lift with two inset shadows: a light one at the top left and a darker one at the bottom right, which round the surface like soft clay.
Pastels and big radii
Soft pastel fills and generous border radii, 24 pixels and up, give the friendly, toy-like look. Sharp corners break the effect.
Tint the shadows
Use a darker shade of each element's own colour for its shadows rather than grey, so pink clay casts pink shadow and stays vibrant.
Clear states
Soft shading alone does not show focus or selection well. Add focus rings and colour changes, such as the green track on the toggle.
Frequently asked questions
How is claymorphism different from neumorphism?
Neumorphism blends into the background; clay floats above it with colourful fills and outer shadows.
Who is it for?
Kids' products, wellness apps, games and friendly brands.
Is it accessible?
With dark text on pastel fills and strong focus rings, as in these demos, yes.