Design Atlas
한국어
❖ Design styles

Claymorphism

클레이모피즘

Puffy, rounded shapes with a soft double shadow — as if molded from clay. Trended in the Figma community around 2021–2022.

Also known as: Clay UI
···
html
<div class="tray">
  <div class="clay a" id="c1"></div>
  <div class="clay b" id="c2">✓</div>
  <div class="clay c" id="c3"></div>
</div>
css
body{background:#eef2fb}
.tray{display:flex;gap:22px;align-items:center}
.clay{border-radius:40% 60% 55% 45%/50% 40% 60% 50%;display:grid;place-items:center;
  color:#fff;font-size:22px;font-weight:800;transition:transform 1.6s ease-in-out}
.a{width:70px;height:70px;background:linear-gradient(145deg,#b9c6ff,#8aa0f2);
  box-shadow:10px 10px 22px rgba(120,140,220,.45),-8px -8px 18px #ffffff,inset 2px 2px 6px rgba(255,255,255,.6)}
.b{width:92px;height:92px;background:linear-gradient(145deg,#ffd3ea,#ff9fc9);
  box-shadow:12px 12px 26px rgba(230,140,180,.5),-8px -8px 18px #ffffff,inset 2px 2px 6px rgba(255,255,255,.6)}
.c{width:56px;height:56px;background:linear-gradient(145deg,#c9f3d8,#8fe0ae);
  box-shadow:8px 8px 18px rgba(130,200,150,.45),-6px -6px 14px #ffffff,inset 2px 2px 6px rgba(255,255,255,.6)}
.bounce{transform:translateY(-10px)}
js
const items = [document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3')];
items.forEach((el, i) => {
  setInterval(() => {
    el.classList.toggle('bounce');
  }, 1200 + i * 220);
});

After neumorphism's same-tone shadows drew accessibility criticism for low contrast, claymorphism emerged as a compromise — keep the soft, dimensional feel but raise contrast substantially. Pastel colors, very large border-radius (near capsule/blob shapes), and two stacked shadows — an outer soft glow and an inner light highlight — combine into a "puffed up and squeezable" look.

It shows up often on buttons and icon badges, and pairs well with illustration on onboarding screens and app icons. The build is just several layered box-shadow values (an outer soft shadow, an inner light highlight, an inner dark shadow) over a pastel gradient — pure CSS, nothing exotic.

Apply it to too many elements and the whole screen turns soft and mushy, blurring hierarchy. It's safer as an accent — a few cards, an icon, one hero illustration.