Claymorphism

Rounded pastel UI that looks molded from soft matte clay, with puffy volume, broad highlights, and chunky gentle shadows.

3D icons that look like marshmallowspastel toy-like cardssquishy rounded 3D iconsicons that look made of Play-Dohpuffy pastel interfaceplasticine app designapp buttons that look inflatedsoft blobs with chunky shadowsclay morphisim

See it

Live demo coming soon

What it is

Claymorphism makes interface objects look molded from soft matte clay. Shapes are thick, rounded, and slightly puffy, with pastel fills, broad highlights, and paired inner and outer shadows that suggest a thumb-pressed surface. It sits between neumorphic UI and a stylized 3D illustration. Michal Malewicz named it in a 2021 hype4.academy article, extending the skeuomorphism, neumorphism, glassmorphism run of coinages.

Reach for it in onboarding, children's products, friendly finance tools, empty states, or a hero area that needs warmth without detailed illustration. It works best as a small family of icons, buttons, or characters against a quiet background, not as the material for every line of content.

Gotcha: soft pastel surfaces often erase the boundary between decoration and control. Preserve a clear silhouette, visible focus state, and strong text contrast. Too many stacked shadows also muddy the clay effect and make lightweight pages pay for a look that could have been one image.

Ask AI for it

Turn the key cards and icons into claymorphism. Use large asymmetric border-radius values, matte pastel fills, and layered CSS box-shadow with one soft dark shadow outside plus one pale inset highlight. Make each object thick and slightly irregular, like a hand-shaped plasticine toy, with no glass, chrome, or sharp corners. Keep text on a flat high-contrast surface, add a 2px solid focus-visible outline to controls, and limit the clay treatment to primary objects rather than the whole page.

You might have meant

neumorphismskeuomorphismkawaiiflat designwhimsical playful ui