Micro Tools
Advertisement

Claymorphism CSS

Build the clay look: puffy rounded shapes with a big soft inner highlight and a crisp outer shadow. Tune depth, puffiness and colors, then copy the CSS.

Clay controls

Clay is a light inner highlight plus a darker outer shadow on a pastel base.

Preview and CSS
Claysoft and puffy
Advertisement

What makes clay different from neumorphism

Both use layered shadows, but clay goes bolder: a bright white inner highlight on the top-left edge, a saturated darker tone on the bottom-right, and a crisp colored outer shadow. The result reads as molded plasticine rather than machined metal, which is why claymorphism suits playful, friendly interfaces.

Picking clay colors

Clay loves pastels: pink, mint, sky, peach and lavender. The base must be light enough that a white inner highlight is visible, and saturated enough that the darker outer shadow reads as the same hue. Grays and near-blacks just look like plain shadows.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Claymorphism CSS FAQs

Why does my clay card look flat?
The inner highlight is probably missing or too faint. Clay needs the white inset highlight at 3px 3px to sell the puffy edge. Also check the backdrop: clay pops on a light contrasting background, not on a color close to the card itself.
How puffy should the corners be?
Radius between 24 and 48px reads as clay. Small radii look like ordinary cards with shadows. Pair a big radius with generous padding so content never crowds the curved edges.
Can claymorphism work for buttons?
Yes, it is great for chunky CTA buttons. Add a pressed state that swaps the outer shadow for inset shadows, mirroring the neumorphic press technique, so the button feels squishy when clicked.
Is claymorphism just a trend?
It peaked around 2022 but the technique is timeless for kids products, games and playful brands. Use it where friendliness matters; stick to flatter styles for enterprise dashboards.
How do I keep text readable on clay?
Use a darker shade of the clay color for text, like a deep rose on pink clay. Pure black looks harsh against pastel clay, and white text usually fails contrast.
Advertisement