Claymorphism
A 260 × 278 px modeling-clay card: pastel gradient background, a light inner shadow top left and a dark one bottom right, big 28 px corners, purple icon and button with a colored shadow; on hover the card lifts by 4 px and its shadow lengthens, the button grows by 5%. 100% CSS.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Glassmorphism has 47 effects, including 6 free. Explore the category →
3 usage examples
How it works
Claymorphism inverts neumorphism: instead of a surface carved into the background, a puffy object sitting on it. The card .neu-clay-card (260 px, padding: 28px, border-radius: 28px, centered flex column with a 14 px gap) stacks three shadows: a drop shadow rgba(0,0,0,.12) 8px 8px 20px that lifts it off the background, a dark inner shadow rgba(0,0,0,.06) -4px -4px 8px inset that darkens its bottom-right edge, and a white inner shadow rgba(255,255,255,.8) 4px 4px 8px inset that lights its top-left edge — that double inner reflection is what gives the “modeling clay” volume. The background is a 135deg pastel gradient #f0e6ff → #e8d5f5, outlined by a 2 px white border at 60%. The icon (64 × 64 px, 20 px radius, #8b5cf6 → #a78bfa gradient) and the button (14 px radius, #8b5cf6 → #7c3aed gradient) reuse the same inner shadows, with a colored drop shadow rgba(139,92,246,.3) 4px 4px 12px: a purple object casts a purple shadow.
Hover works in two steps, measured in Chromium 151, Firefox 153 and WebKit 26.5. On the card, transform: translateY(-4px) and a longer, denser drop shadow (12px 12px 28px at 15%) with transition: .3s: the card rises towards the user. On the button, scale(1.05) on hover and scale(.98) on press, in 0.2 s. The title is 16 px, weight 700, #4c1d95; the text 13.1 px, #7c3aed, centered; the icon is a 30 px inline SVG filled white. No JavaScript, no external resource.
The .demo-preview frame declares a light lilac #ede4f8 background and 32 px of vertical margin, because claymorphism lives off its shadow: on a black #0a0a0f frame, the 12% black drop shadow would not show (1.01:1 between shadow and background, measured) and the hover lift would come down to a 4 px shift with no shadow. On the lilac, the shadow reaches 1.30:1 at its darkest point and the card stands out. Nothing is imposed on body: on your page, set the card on a light background, ideally pastel.
Accessibility
- Contrast: the
#4c1d95title measures 9.1:1 at the top of the card and 8.0:1 at the bottom. The#7c3aedtext is 4.7:1 on#f0e6ffbut 4.1:1 on#e8d5f5, the lower end of the gradient, where it sits: switch it to#6d28d9(5.2:1). The button's white text measures 4.2:1 on#8b5cf6and 5.7:1 on#7c3aed: at 13.6 px weight 600, the light half is below 4.5:1 —#7c3aed → #6d28d9settles it. - Keyboard: the button is a real
<button>, reachable with Tab, with the browser focus ring. The card itself only reacts to the mouse: it hascursor: pointerwithout being a link or a button. If the whole card should be clickable, put the link on the title and stretch its area (::afterwithposition: absolute; inset: 0), then add.neu-clay-card:focus-withinto the hover rule so the card also lifts with the keyboard. - Button action: the button has neither a
typenor a handler. Inside a form it submits it (submitby default); elsewhere it does nothing. Addtype="button"and your click, or replace it with an<a href>if it leads to a page. The SVG icon has no text: keeparia-hidden="true"on it (done in the scenes) or give it a<title>if it carries meaning. - Motion: a 4 px rise and 5% growth, on hover only, no loop. That is below the thresholds that bother motion-sensitive people; to honor the preference anyway:
@media (prefers-reduced-motion: reduce) { .neu-clay-card, .neu-clay-btn { transition: none; transform: none !important } }— the longer shadow is enough to signal hover.
Browser compatibility
CSS only: multiple box-shadows including two inset, linear-gradient, border-radius, transform, transition, flexbox, inline SVG. Zero JavaScript, zero dependencies. Measured pasted into a blank page in Chromium 151, Firefox 153 and Playwright's WebKit 26.5: same computed shadows at rest and on hover, same translateY(-4px). The title asks for Inter; without it, the browser uses its default sans-serif font.
On touch screens there is no hover: the card keeps its resting shadow, which is enough to read it as an object; the button's scale(.98) on press stays visible. In a browser without transition, changes happen at once, with no loss of information.
The code
HTML structure to paste into your page (the CSS + JS come with Premium):
<div class="demo-preview">
<div class="neu-clay-scene">
<div class="neu-clay-card">
<div class="neu-clay-icon">
<svg viewBox="0 0 24 24"><path d="…"></path></svg>
</div>
<h3>…</h3>
<p>…</p>
<button class="neu-clay-btn">…</button>
</div>
</div>
</div>The full HTML + CSS + JS of Claymorphism, ready to paste — plus all 840 effects. Or $299 once, lifetime access.
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Card tint (CSS — .neu-clay-card { background: linear-gradient(135deg, #f0e6ff, #e8d5f5) }) |
lilac #f0e6ff → #e8d5f5 | Keep two close pastels (5 to 8% apart in lightness): a stronger gradient breaks the feeling of a single material. Change the text color at the same time and check 4.5:1 on the darker tint. |
Accent color (CSS — .neu-clay-icon and .neu-clay-btn gradients, and their rgba(139,92,246,.3) shadow) |
purple #8b5cf6 → #a78bfa / #7c3aed | Change the gradient AND the drop-shadow color: a shadow left purple under a green button gives the trick away. Green and blue from the scenes: rgba(22,163,74,.3), rgba(37,99,235,.3). |
Volume (CSS — card inset shadows: -4px -4px 8px at 6%, 4px 4px 8px white at 80%) |
4 px / 8 px blur | 6 px / 12 px make the card puffier; beyond that, the white highlight eats into the content. Without these two inner shadows, all that is left is an ordinary pastel card. |
Corners (CSS — border-radius: card 28 px, icon 20 px, button 14 px) |
28 / 20 / 14 px | The style lives on big radii: keep the card above 24 px. A 50% icon radius gives a round pill, still consistent. |
Hover (CSS — .neu-clay-card:hover { transform: translateY(-4px) }, .neu-clay-btn:hover { transform: scale(1.05) }) |
−4 px in 0.3 s · ×1.05 in 0.2 s | −6 px with a 16 px 16 px 32 px shadow for a more playful feel; remove the card rule if it is not clickable, so as not to promise an action. |
Page background (CSS — .demo-preview { background: #ede4f8 }) |
#ede4f8 (light lilac), 32 px vertical margin | Any light background works; a pastel close to the card strengthens the effect. On a dark background the drop shadow disappears (measured 1.01:1 on #0a0a0f). |
FAQ
rgba(139,92,246,.35) 0 10px 30px) — the volume then mostly comes from the inner shadows.<button> with no type and no handler, ready for your action. Add type="button" and a click listener, or replace it with an <a> link keeping the neu-clay-btn class — the style applies identically.
