How to use the claymorphism generator
- Pick a clay colour. Saturated, friendly colours work best. The preview background is a pale tint of your colour so you can judge the effect in context.
- Set depth and rounding. Depth scales all three shadows together. Larger corner radius values make the shape look softer and more inflated.
- Balance highlight and drop shadow. The inner highlight adds the shine on the top left edge. The drop shadow sets how far the card appears to float.
- Copy the CSS. Copy the rule into your stylesheet and reuse it on cards, buttons or illustrations.
What is claymorphism?
Claymorphism is a playful 3D style that makes interface elements look like soft clay. It is popular for landing pages, onboarding screens and illustrations aimed at a friendly, approachable feel.
How it differs from neumorphism
Neumorphism blends elements into a matching background. Claymorphism uses its own colour that stands out from the page, with an outer drop shadow plus two inset shadows (one dark, one light) that give the element a rounded, inflated surface.
Pairing it with content
Clay cards look best with bold, rounded type and simple icons. Keep body text short inside them and check contrast, since light clay colours often need dark text.
Frequently asked questions
Can I use claymorphism on buttons?
Yes. Reduce the depth to 6 to 10px for buttons, and switch to a smaller drop shadow or an inset shadow for the pressed state.
Does this need any images?
No. The whole effect is three box-shadow values and a background colour, so it adds no page weight.
Which browsers support it?
All modern browsers. Multiple and inset box-shadows have been supported for over a decade.