Claymorphism
Also called clay UI or clay design
A playful UI style with puffy, rounded shapes that look like soft clay, made with large radii and layered inner and outer shadows.
const CARDS = [
{
title: 'Save',
href: '/save',
text: 'Round up every purchase.',
color: 'bg-violet-300 shadow-violet-600/35'
},
{
title: 'Grow',
href: '/grow',
text: 'Earn 4% on your savings.',
color: 'bg-emerald-300 shadow-emerald-600/35'
},
{
title: 'Share',
href: '/share',
text: 'Split bills with friends.',
color: 'bg-amber-300 shadow-amber-600/35'
}
];
// The outer shadow lifts the card, tinted with its own color; the two inner
// shadows, light at the top left and dark at the bottom right, puff it up.
const CLAY =
'rounded-[32px] shadow-[0_16px_32px_-8px] inset-shadow-[8px_8px_16px_rgb(255_255_255/0.6),-8px_-8px_16px_rgb(0_0_0/0.12)] transition-[scale,box-shadow] duration-150 active:scale-[0.97] active:shadow-[0_8px_16px_-8px]';
export function ClayFeatures() {
return (
<div className='grid gap-6 bg-violet-50 p-8 sm:grid-cols-3'>
{CARDS.map((card) => (
<a
key={card.title}
href={card.href}
className={`p-6 text-slate-900 ${CLAY} ${card.color}`}
>
<h3 className='text-xl font-bold'>{card.title}</h3>
<p className='mt-1 text-sm'>{card.text}</p>
</a>
))}
</div>
);
}Restyle the feature cards in a claymorphism style: pastel fills, 32px corner radius, an outer shadow of 0 16px 32px -8px at 35% of the card color, and two inset shadows (inset 8px 8px 16px rgba(255, 255, 255, 0.6) and inset -8px -8px 16px rgba(0, 0, 0, 0.12)). On press, scale the card to 0.97 and tighten the outer shadow over 150ms.
Paste into Layerwise or any AI coding tool.
What is Claymorphism?
Claymorphism makes cards, buttons, and icons look like inflated pieces of clay or soft plastic. The look comes from very rounded corners, bright pastel fills, an outer shadow that lifts the element off the page, and two inner shadows: a light one near the top left and a darker one near the bottom right that give the surface its bulge.
It fits friendly products such as kids’ apps, games, onboarding illustrations, finance apps that want to feel approachable, and 3D-style icon sets. Chunky rounded type and simple icons complete the look.
Because clay elements have their own color, contrast is easier to get right than with neumorphism. Keep the effect on a few hero elements and simple surfaces; puffy shadows on every list row and input make a dense interface feel heavy.
Often confused with
- Neumorphism
- Neumorphism keeps elements the same color as the background and uses outer shadows only. Claymorphism gives each element its own color and puffs it up with inner shadows.
Related terms
All termsNeumorphism
A soft UI style where buttons and cards look pushed out of, or pressed into, a surface of the same color, using light and dark shadows.
Border radius
The CSS property that rounds an element’s corners, from a slight softening to a full pill or circle.
Drop shadow
A shadow cast behind an element to make it look raised off the page, with larger, softer shadows signaling higher elevation.
Press feedback
A quick visual response, usually a slight shrink, that shows a button registered the press the moment a finger or mouse button goes down.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.