Big, friendly radii
Corners of 24 to 40 pixels, or full pills and circles. Sharp edges almost never appear.
Interface shapes that look inflated and soft, like modelling clay you could squeeze. The effect comes from stacking shadows inside and outside each element.
Open the kit Copy the promptClaymorphism borrows from 3D illustration. Every surface looks puffy and rounded, lit from one soft source above the page.
Corners of 24 to 40 pixels, or full pills and circles. Sharp edges almost never appear.
A light inset on the top left and a darker inset on the bottom right make a flat shape bulge outward.
A large blurred outer shadow lifts each object off the background, so it hovers above the page.
Candy colors with plenty of white mixed in keep the mood playful and calm.
The style sits at the end of a short chain of interface experiments with depth.
Studios such as Aardman, founded in 1972, turn clay characters into a familiar and friendly visual language for film and TV.
Designers share soft, extruded interfaces where elements seem pushed out of the background. The look spreads fast but struggles with contrast.
Free tools like Blender and a wave of 3D icon packs make rounded, glossy illustration cheap for any product team.
Designer Michał Malewicz writes about claymorphism, pairing UI cards with inner shadows and floating clay-like 3D objects. He had named glassmorphism a year earlier.
Clay should move like a soft material. Animators call the trick squash and stretch: the ball flattens on impact and grows taller as it rises.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
Consumer apps use clay heroes to make a first visit feel welcoming.
Soft shapes read as safe and touchable, and big targets suit small fingers.
Savings and habit trackers use clay cards to make numbers feel less stressful.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Pastels for surfaces, one deeper violet for action, and a dark ink for every piece of text. Tap a swatch to copy its hex value.
:root{
--lilac: #C7B6FF;
--violet: #8A74F5;
--peach: #FFC6A6;
--mint: #AEEFD0;
--lemon: #FFE89A;
--ink: #2F2A55;
--mist: #ECEBFA;
}A rounded display face matches the rounded shapes. Keep body text in a sturdy humanist sans so it stays readable on pastel.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "Fredoka",system-ui,sans-serif;
--font-b: "Nunito",system-ui,sans-serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(42px, 9vw, 81px);
--fs-1: 41.5px; --fs-2: 33.2px;
--fs-3: 26.6px; --fs-4: 21.2px;
--fs-body: 17px; --fs-sm: 13.6px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 700;
letter-spacing: 0;
text-transform: none;
line-height: 1.1;
}
/* fonts: Fredoka and Nunito, both free on Google Fonts */Clay layouts breathe. Use generous gaps of 24 to 32 pixels so shadows never collide.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 28px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}Depth comes from three stacked shadows. Borders are off, radius does the outlining.
:root {
--radius: 28px;
--radius-sm: 18px;
--bw: 0px;
--shadow: 10px 10px 24px rgba(80,70,150,.28), inset -8px -8px 16px rgba(40,20,90,.14), inset 8px 8px 16px rgba(255,255,255,.75);
--shadow-sm: 6px 6px 14px rgba(80,70,150,.25), inset -5px -5px 10px rgba(40,20,90,.14), inset 5px 5px 10px rgba(255,255,255,.7);
--gap: 28px;
--pad: 26px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Claymorphism kit · Anti-Boring */
:root{
--bg:#ECEBFA;
--surface:#FFFFFF;
--surface2:#E2E0F7;
--fg:#2F2A55;
--muted:#5D5886;
--accent:#8A74F5;
--accent-fg:#FFFFFF;
--accent2:#FFC6A6;
--accent2-fg:#2F2A55;
--border:transparent;
--bw:0px;
--radius:28px;
--radius-sm:18px;
--shadow:10px 10px 24px rgba(80,70,150,.28), inset -8px -8px 16px rgba(40,20,90,.14), inset 8px 8px 16px rgba(255,255,255,.75);
--shadow-sm:6px 6px 14px rgba(80,70,150,.25), inset -5px -5px 10px rgba(40,20,90,.14), inset 5px 5px 10px rgba(255,255,255,.7);
--font-d:"Fredoka",system-ui,sans-serif;
--font-b:"Nunito",system-ui,sans-serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:700;
--h-track:0;
--h-case:none;
--h-style:normal;
--h-lh:1.1;
--gap:28px;
--pad:26px;
--focus:rgba(138,116,245,.35);
--ok:#1E7A55;
--warn:#935E00;
--danger:#C23A55;
--info:#5B46D6;
--field-bg:#F6F5FF;
--field-shadow:inset 4px 4px 8px rgba(80,70,150,.18), inset -4px -4px 8px rgba(255,255,255,.9);
--media:radial-gradient(circle at 30% 30%,#fff 0,#C7B6FF 40%,#8A74F5 100%);
--code-bg:#2F2A55;
--code-fg:#ececf2;
--btn-case:none;
--btn-track:0;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.6px;
--fs-body:17px;
--fs-4:21.2px;
--fs-3:26.6px;
--fs-2:33.2px;
--fs-1:41.5px;
--fs-d:clamp(42px, 9vw, 81px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{border-radius:999px;font-family:var(--font-d)}
.btn:active{transform:translateY(2px) scale(.97)}
.badge{box-shadow:var(--shadow-sm)}
.check,.radio,.switch{border:0}
.switch::before{background:#fff;box-shadow:2px 2px 5px rgba(80,70,150,.35)}
.alert{border:0;box-shadow:var(--shadow-sm);border-left:0;border-radius:var(--radius-sm)}
.alert b{display:inline-block;padding:.1em .6em;border-radius:999px;background:color-mix(in srgb,var(--c) 15%,#fff)}
.progress{border:0;box-shadow:var(--field-shadow)}
.progress i{border-radius:999px}
.table-wrap{box-shadow:var(--shadow)}
.tab{border-radius:999px;border-bottom:0}
.tab[aria-selected="true"]{background:#fff;box-shadow:var(--shadow-sm)}
.tabs{border:0}
.pager a{border:0;box-shadow:var(--shadow-sm);border-radius:50%}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#1E1B33;
--surface:#2A2647;
--surface2:#24203D;
--fg:#EDEBFF;
--muted:#B7B2DA;
--shadow:10px 10px 24px rgba(0,0,0,.45), inset -8px -8px 16px rgba(0,0,0,.35), inset 8px 8px 16px rgba(255,255,255,.07);
--shadow-sm:6px 6px 14px rgba(0,0,0,.45), inset -5px -5px 10px rgba(0,0,0,.35), inset 5px 5px 10px rgba(255,255,255,.07);
--field-bg:#221E3A;
--field-shadow:inset 4px 4px 8px rgba(0,0,0,.4), inset -4px -4px 8px rgba(255,255,255,.04);
--code-bg:#120F24;
--accent2-fg:#2F2A55;
}
html.alt .docnav .container,html.alt .tl li,html.alt .tab[aria-selected="true"]{background:#2A2647}html.alt .alert b{background:rgba(255,255,255,.08)}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>Clay's louder cousin. Shapes look blown up like balloons or pool toys, with shiny highlights and stretched, glossy surfaces.
.balloon{width:160px;height:160px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff 0 7%,rgba(255,255,255,.4) 14%,transparent 30%),radial-gradient(circle at 60% 70%,#FF6FA8,#E0357A 60%,#A61B55);box-shadow:inset -14px -18px 30px rgba(120,0,50,.35),0 24px 30px -10px rgba(80,0,40,.35);animation:puff 3s ease-in-out infinite}
.pillow{width:220px;height:120px;border-radius:60px;background:radial-gradient(ellipse at 30% 25%,#fff 0 6%,rgba(255,255,255,.35) 14%,transparent 30%),linear-gradient(160deg,#8FE3FF,#3BA8E0 60%,#1F74B8);box-shadow:inset -10px -14px 26px rgba(0,40,90,.35),0 20px 26px -10px rgba(0,40,90,.35)}
@keyframes puff{50%{transform:scale(1.05,.97)}}
.infl-row{display:flex;gap:40px;align-items:center;justify-content:center;flex-wrap:wrap;padding:20px}
<div class="infl-row"><div class="balloon" role="img" aria-label="Inflatable pink ball"></div><div class="pillow" role="img" aria-label="Inflatable blue pillow"></div></div>Claymorphism is matte and soft. Inflatable 3D is glossy and saturated, with sharp white highlights. Pick one per project, since mixing both looks muddy.
A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for a habit-tracking app for families in an authentic Claymorphism style.
Palette: Lilac #C7B6FF, Violet #8A74F5, Peach #FFC6A6, Mint #AEEFD0, Lemon #FFE89A, Ink #2F2A55, Mist #ECEBFA.
Typography: Fredoka 700 for headings, Nunito 400 and 800 for body. Rounded letterforms only.
Layout: Asymmetric hero with text on the left and a cluster of floating clay objects on the right. Generous 28px gaps.
Signature details: Every surface uses one outer shadow plus two inset shadows (light top-left, dark bottom-right). Radii of 24px to full pill. One light direction across the page.
Components: Pill buttons that press down on click, inset text fields, circular pagination, toggles with a raised white thumb.
Motion: Squash and stretch on bounces, slow floating for decorative objects, nothing faster than 200ms on press.
Avoid: hard borders, sharp corners, pure black text, neon colors, more than one light direction.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Pastel text on pastel fill fails accessibility checks. Keep text dark and test every color pair.
If one card is lit from the left and another from the right, the illusion breaks. Pick one direction.
When every element puffs up, nothing stands out. Save the full effect for key actions and hero objects.
Many large blurred shadows can slow long pages on older phones. Test on a cheap device.