Trend · c. 2021–present · Online UI and 3D illustration communities
Claymorphism
Soft, puffy surfaces that look pressable.
What is Claymorphism?
Claymorphism makes interface elements look like inflated pieces of modelling clay: very rounded shapes, pastel fills and a small stack of shadows that gives each object volume. It grew out of the soft 3D illustration wave of the early 2020s, then spilled into buttons, cards and icons. Its signature recipe uses two inner shadows (a light one at the top left, a darker one at the bottom right) plus one outer shadow, which lets any fill colour sit on any background. It suits friendly, low-stakes products and struggles on dense screens where every element competes for attention.
The story
After a decade of flat interfaces, designers combined soft 3D illustration with light skeuomorphic cues. Smashing Magazine's 2022 write-up credits designer Michal Malewicz with the name and cites colourful soft 3D in projects such as Meta's Horizon Worlds as part of the mood. The term labels a visual direction, not a formal movement.
How do you recognise Claymorphism?
- Large corner radii on nearly everything
- Pastel or candy fills with one saturated accent
- Two inner shadows plus one soft outer shadow
- Rounded 3D illustrations and icons beside flat text
Colour, type, layout and material
- #FFC8DD
- #BDE0FE
- #FFF3B0
- #5B4B8A
Typography. Use a rounded or friendly sans in medium to bold weights and keep sizes generous. Avoid thin weights that disappear against soft fills.
Composition. Use one light source for every shadow. Keep generous padding and let one or two hero objects carry the volume while the rest stays quieter.
Materials. Soft 3D renders, inflated icons, layered inner shadows, matte plastic and clay. In CSS, three stacked box-shadows.
Why does Claymorphism work?
Round, inflated forms can read as safe, friendly and approachable. They also look like toys, which suits onboarding and education but can undercut serious or high-stakes tasks. Associations vary by audience and culture.
The principle. Give every object a clear volume and let the colour carry the mood. The craft is restraint: one light direction, one radius family and a small palette, so the softness reads as a system and not a pile of blobs.
Where it was used
Meta's Horizon Worlds, Meta, 2021–2022. Described in Smashing Magazine's analysis as an example of colourful, soft 3D becoming a core part of an app and website's visual direction.
- Onboarding and education flows
- Friendly consumer and wellness apps
- Illustration systems and empty states
What to avoid
- Puffy shadows on every element at once
- Low-contrast text on pastel fills
- Clay styling on dense data tables
Try it: a short exercise
Pick one screen. Choose a single light direction, then build the card, button and toggle from the same three-shadow recipe in two different fills. Check that text still passes contrast on each fill.
How do you prompt for Claymorphism?
These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.
For an image or visual design
Create an original Claymorphism-informed [FORMAT] about [SUBJECT] for [AUDIENCE]. Make objects look like soft inflated clay: very rounded forms, pastel fills, one consistent light direction, a light inner highlight at the top left, a darker inner shade at the bottom right and a soft coloured drop shadow. Use a disciplined palette drawn from #FFC8DD, #BDE0FE, #FFF3B0, #5B4B8A. Typography direction: Use a rounded or friendly sans in medium to bold weights and keep sizes generous. Avoid thin weights that disappear against soft fills. Composition: Use one light source for every shadow. Keep generous padding and let one or two hero objects carry the volume while the rest stays quieter. Make every detail follow a clear visual idea. Build the subject from observations specific to the brief, not stock symbols. Do not copy existing products, branding or screens. Return one resolved composition and explain three deliberate design decisions.
For an interface
Implement a contemporary responsive interface for [SUBJECT], serving [AUDIENCE], in [FORMAT], using Claymorphism as a design principle rather than a costume. Build cards, buttons, toggles and inputs with large radii and a three-shadow recipe (two inset shadows and one soft outer shadow) on pastel fills. Press states should shrink the element slightly. Use real content, semantic HTML, responsive CSS and a coherent spacing scale. Keep body text at WCAG AA contrast, never encode meaning only through colour, provide visible keyboard focus, touch targets of at least 44px, and working loading, empty, error and success states. Use motion only to explain interaction and respect prefers-reduced-motion. Explain which principles you translated and test keyboard navigation and mobile overflow.
Lineage
Draws on: Skeuomorphism, Flat design, Neumorphism.