20 CSS Claymorphism
13 / 20

All 20 in 20 CSS Claymorphism

  1. 01Claymorphism Shadow Recipe Reference Build
  2. 02Inner Highlight and Inner Shadow Layering
  3. 03Border Radius Scale for Puffy Shapes
  4. 04Claymorphism vs Neumorphism Side by Side
  5. 05Claymorphism with Glassmorphism Hybrid
  6. 06Light Source Consistency Across a Clay Layout
  7. 07Clay Depth Tiers for Visual Hierarchy
  8. 08Tailwind CSS Claymorphism Implementation
  9. 09Clay Button Press and Squish States
  10. 10Clay Toggle Switch and Checkbox Set
  11. 11Clay Input Field and Search Bar
  12. 12Clay Badge & Pill Tag System
  13. 13Claymorphism Card Component
  14. 14Clay Modal Dialog with Floating Depth
  15. 15Clay Pricing Table with Raised Popular Tier
  16. 16Clay Bottom Tab Bar for Mobile
  17. 17Clay Icon Tiles and App Grid
  18. 18Clay Toast & Floating Alert Bubbles
  19. 19Clay Dark Mode Shadow Recalibration
  20. 20Clay Animation Performance & Transform Optimization
Pure CSSMIT licensed

Claymorphism Card Component

The workhorse: a clay content card with a real photo, nested concentric radii, a clay avatar row, and a hover lift that promotes the card exactly one depth tier. It is also container-query driven — the same card switches from stacked to side-by-side based on its own width, not the viewport, so it drops into a sidebar or a full-width grid unchanged.

Live Demo
Plain CSSTailwind v4
Try it

Untitled UI Pro: a 10,000+ component Figma UI kit · from $129 one-time

Untitled UI · Affiliate link

Get Untitled UI Pro

The code

<section class="cl-13" aria-label="Claymorphism card component demo">
  <div class="cl-13__stage">
    <article class="cl-13__card">
      <figure class="cl-13__media">
        <img class="cl-13__img" width="640" height="640" loading="lazy" alt="Terracotta pottery bowls on a soft neutral background"
          src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?q=80&w=800&auto=format&fit=crop">
        <figcaption class="cl-13__tag">Module 04</figcaption>
      </figure>
      <div class="cl-13__body">
        <p class="cl-13__kicker">Interactive course</p>
        <h2 class="cl-13__h">Sculpting depth with CSS shadows</h2>
        <p class="cl-13__text">Six lessons on layered shadows, light discipline and the elevation scale — with every example built as one copyable snippet.</p>
        <div class="cl-13__meta">
          <ul class="cl-13__avatars">
            <li class="cl-13__av cl-13__av--a" aria-hidden="true"></li>
            <li class="cl-13__av cl-13__av--b" aria-hidden="true"></li>
            <li class="cl-13__av cl-13__av--c" aria-hidden="true"></li>
          </ul>
          <span class="cl-13__count">1,204 learners</span>
        </div>
        <div class="cl-13__foot">
          <button class="cl-13__btn" type="button">Start module</button>
          <button class="cl-13__save" type="button" aria-label="Save for later">
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M7 4h10a1 1 0 011 1v15l-6-3.6L6 20V5a1 1 0 011-1z" fill="currentColor"/></svg>
          </button>
        </div>
      </div>
    </article>
    <p class="cl-13__chip" aria-hidden="true">concentric radii · image in a clay well · @container layout switch</p>
  </div>
</section>
.cl-13,
.cl-13 *,
.cl-13 *::before,
.cl-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cl-13 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--cl-13-bg);
  --cl-13-bg: oklch(0.94 0.03 55);
  --cl-13-clay: oklch(0.9 0.05 55);
  --cl-13-accent: oklch(0.8 0.13 45);
  --cl-13-shade: oklch(0.56 0.09 50/.55);
  --cl-13-light: oklch(1 0.015 60/.95);
  --cl-13-ink: oklch(0.28 0.05 50);
  --cl-13-mut: oklch(0.5 0.04 50);
  font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
  color: var(--cl-13-ink);
}

.cl-13__stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: clamp(20px,5vw,56px);
  background: radial-gradient(80% 60% at 30% 0%,oklch(0.97 0.035 70),transparent 66%);
}

.cl-13__card {
  --cl-13-r: 40px;
  --cl-13-p: 14px;
  container-type: inline-size;
  display: grid;
  gap: clamp(14px,2.4vw,18px);
  width: min(100%,560px);
  padding: var(--cl-13-p);
  border-radius: var(--cl-13-r);
  background: var(--cl-13-clay);
  box-shadow: 0 26px 46px -16px var(--cl-13-shade),inset 0 -16px 26px -12px var(--cl-13-shade),inset 0 18px 26px -8px var(--cl-13-light);
  transition: translate .4s cubic-bezier(.34,1.3,.5,1),box-shadow .4s;
}

.cl-13__card:hover {
  translate: 0 -8px;
  box-shadow: 0 40px 66px -20px var(--cl-13-shade),inset 0 -16px 26px -12px var(--cl-13-shade),inset 0 20px 28px -8px var(--cl-13-light);
}

@container (min-width: 430px) {
  .cl-13__card {
    grid-template-columns: 172px 1fr;
    align-items: stretch;
  }
}

.cl-13__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--cl-13-r) - var(--cl-13-p));
  background: linear-gradient(145deg,oklch(0.86 0.07 55),oklch(0.75 0.09 40));
}

.cl-13__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 12px 22px -10px var(--cl-13-shade),inset 0 -10px 20px -12px oklch(0 0 0/.35);
  pointer-events: none;
}

.cl-13__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 172px;
  object-fit: cover;
  transition: scale .5s cubic-bezier(.2,.7,.3,1);
}

.cl-13__card:hover .cl-13__img {
  scale: 1.04;
}

.cl-13__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cl-13-ink);
  background: oklch(1 0 0/.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 12px -6px var(--cl-13-shade),inset 0 5px 8px -5px oklch(1 0 0);
}

.cl-13__body {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: clamp(8px,2vw,14px) clamp(10px,2.4vw,18px) clamp(10px,2vw,14px);
}

.cl-13__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: color-mix(in oklch,var(--cl-13-ink) 62%,transparent);
}

.cl-13__h {
  font-size: clamp(20px,3vw,25px);
  font-weight: 770;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.cl-13__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in oklch,var(--cl-13-ink) 80%,transparent);
  text-wrap: pretty;
}

.cl-13__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.cl-13__avatars {
  list-style: none;
  display: flex;
}

.cl-13__av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-inline-start: -9px;
  box-shadow: 0 0 0 3px var(--cl-13-clay),inset 0 -5px 8px -6px var(--cl-13-shade),inset 0 6px 8px -5px var(--cl-13-light);
}

.cl-13__av:first-child {
  margin-inline-start: 0;
}

.cl-13__av--a {
  background: oklch(0.84 0.1 30);
}

.cl-13__av--b {
  background: oklch(0.84 0.09 190);
}

.cl-13__av--c {
  background: oklch(0.85 0.1 290);
}

.cl-13__count {
  font-size: 12.5px;
  color: var(--cl-13-mut);
  font-variant-numeric: tabular-nums;
}

.cl-13__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.cl-13__btn {
  flex: 1;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 22px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 680;
  color: oklch(0.25 0.06 45);
  cursor: pointer;
  background: var(--cl-13-accent);
  box-shadow: 0 14px 24px -10px var(--cl-13-shade),inset 0 -10px 16px -9px var(--cl-13-shade),inset 0 12px 16px -7px var(--cl-13-light);
  transition: translate .2s,box-shadow .2s,scale .2s cubic-bezier(.2,.8,.3,1.4);
}

.cl-13__btn:hover {
  translate: 0 -3px;
}

.cl-13__btn:active {
  scale: 1 .94;
  translate: 0 3px;
  box-shadow: inset 0 12px 18px -8px var(--cl-13-shade);
}

.cl-13__save {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border: 0;
  border-radius: 20px;
  color: var(--cl-13-mut);
  cursor: pointer;
  background: color-mix(in oklch,var(--cl-13-clay) 62%,white);
  box-shadow: 0 10px 18px -10px var(--cl-13-shade),inset 0 -8px 13px -8px var(--cl-13-shade),inset 0 10px 13px -6px var(--cl-13-light);
  transition: color .25s,translate .2s;
}

.cl-13__save:hover {
  color: var(--cl-13-ink);
  translate: 0 -3px;
}

.cl-13__save:active {
  translate: 0 3px;
  box-shadow: inset 0 10px 16px -7px var(--cl-13-shade);
}

.cl-13__btn:focus-visible,
.cl-13__save:focus-visible {
  outline: 3px solid var(--cl-13-ink);
  outline-offset: 3px;
}

.cl-13__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--cl-13-mut);
  padding: 9px 16px;
  border-radius: 99px;
  text-align: center;
  background: oklch(1 0 0/.55);
  box-shadow: inset 0 -4px 10px -8px var(--cl-13-shade),inset 0 6px 10px -6px oklch(1 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .cl-13 * {
    transition-duration: .01ms !important;
  }
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Claymorphism from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Claymorphism Card Component
Source: https://codefronts.com/design-styles/css-claymorphism/claymorphism-card-component/

The workhorse: a clay content card with a real photo, nested concentric radii, a clay avatar row, and a hover lift that promotes the card exactly one depth tier. It is also container-query driven — the same card switches from stacked to side-by-side based on its own width, not the viewport, so it drops into a sidebar or a full-width grid unchanged.
## HTML
```html
<section class="cl-13" aria-label="Claymorphism card component demo">
  <div class="cl-13__stage">
    <article class="cl-13__card">
      <figure class="cl-13__media">
        <img class="cl-13__img" width="640" height="640" loading="lazy" alt="Terracotta pottery bowls on a soft neutral background"
          src="https://images.unsplash.com/photo-1578749556568-bc2c40e68b61?q=80&w=800&auto=format&fit=crop">
        <figcaption class="cl-13__tag">Module 04</figcaption>
      </figure>
      <div class="cl-13__body">
        <p class="cl-13__kicker">Interactive course</p>
        <h2 class="cl-13__h">Sculpting depth with CSS shadows</h2>
        <p class="cl-13__text">Six lessons on layered shadows, light discipline and the elevation scale — with every example built as one copyable snippet.</p>
        <div class="cl-13__meta">
          <ul class="cl-13__avatars">
            <li class="cl-13__av cl-13__av--a" aria-hidden="true"></li>
            <li class="cl-13__av cl-13__av--b" aria-hidden="true"></li>
            <li class="cl-13__av cl-13__av--c" aria-hidden="true"></li>
          </ul>
          <span class="cl-13__count">1,204 learners</span>
        </div>
        <div class="cl-13__foot">
          <button class="cl-13__btn" type="button">Start module</button>
          <button class="cl-13__save" type="button" aria-label="Save for later">
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path d="M7 4h10a1 1 0 011 1v15l-6-3.6L6 20V5a1 1 0 011-1z" fill="currentColor"/></svg>
          </button>
        </div>
      </div>
    </article>
    <p class="cl-13__chip" aria-hidden="true">concentric radii · image in a clay well · @container layout switch</p>
  </div>
</section>
```
## CSS
```css
.cl-13,
.cl-13 *,
.cl-13 *::before,
.cl-13 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cl-13 {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: block;
  background: var(--cl-13-bg);
  --cl-13-bg: oklch(0.94 0.03 55);
  --cl-13-clay: oklch(0.9 0.05 55);
  --cl-13-accent: oklch(0.8 0.13 45);
  --cl-13-shade: oklch(0.56 0.09 50/.55);
  --cl-13-light: oklch(1 0.015 60/.95);
  --cl-13-ink: oklch(0.28 0.05 50);
  --cl-13-mut: oklch(0.5 0.04 50);
  font-family: system-ui,-apple-system,'Segoe UI',sans-serif;
  color: var(--cl-13-ink);
}

.cl-13__stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: clamp(20px,5vw,56px);
  background: radial-gradient(80% 60% at 30% 0%,oklch(0.97 0.035 70),transparent 66%);
}

.cl-13__card {
  --cl-13-r: 40px;
  --cl-13-p: 14px;
  container-type: inline-size;
  display: grid;
  gap: clamp(14px,2.4vw,18px);
  width: min(100%,560px);
  padding: var(--cl-13-p);
  border-radius: var(--cl-13-r);
  background: var(--cl-13-clay);
  box-shadow: 0 26px 46px -16px var(--cl-13-shade),inset 0 -16px 26px -12px var(--cl-13-shade),inset 0 18px 26px -8px var(--cl-13-light);
  transition: translate .4s cubic-bezier(.34,1.3,.5,1),box-shadow .4s;
}

.cl-13__card:hover {
  translate: 0 -8px;
  box-shadow: 0 40px 66px -20px var(--cl-13-shade),inset 0 -16px 26px -12px var(--cl-13-shade),inset 0 20px 28px -8px var(--cl-13-light);
}

@container (min-width: 430px) {
  .cl-13__card {
    grid-template-columns: 172px 1fr;
    align-items: stretch;
  }
}

.cl-13__media {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--cl-13-r) - var(--cl-13-p));
  background: linear-gradient(145deg,oklch(0.86 0.07 55),oklch(0.75 0.09 40));
}

.cl-13__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 12px 22px -10px var(--cl-13-shade),inset 0 -10px 20px -12px oklch(0 0 0/.35);
  pointer-events: none;
}

.cl-13__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 172px;
  object-fit: cover;
  transition: scale .5s cubic-bezier(.2,.7,.3,1);
}

.cl-13__card:hover .cl-13__img {
  scale: 1.04;
}

.cl-13__tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cl-13-ink);
  background: oklch(1 0 0/.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 12px -6px var(--cl-13-shade),inset 0 5px 8px -5px oklch(1 0 0);
}

.cl-13__body {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: clamp(8px,2vw,14px) clamp(10px,2.4vw,18px) clamp(10px,2vw,14px);
}

.cl-13__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: color-mix(in oklch,var(--cl-13-ink) 62%,transparent);
}

.cl-13__h {
  font-size: clamp(20px,3vw,25px);
  font-weight: 770;
  line-height: 1.2;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.cl-13__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: color-mix(in oklch,var(--cl-13-ink) 80%,transparent);
  text-wrap: pretty;
}

.cl-13__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.cl-13__avatars {
  list-style: none;
  display: flex;
}

.cl-13__av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-inline-start: -9px;
  box-shadow: 0 0 0 3px var(--cl-13-clay),inset 0 -5px 8px -6px var(--cl-13-shade),inset 0 6px 8px -5px var(--cl-13-light);
}

.cl-13__av:first-child {
  margin-inline-start: 0;
}

.cl-13__av--a {
  background: oklch(0.84 0.1 30);
}

.cl-13__av--b {
  background: oklch(0.84 0.09 190);
}

.cl-13__av--c {
  background: oklch(0.85 0.1 290);
}

.cl-13__count {
  font-size: 12.5px;
  color: var(--cl-13-mut);
  font-variant-numeric: tabular-nums;
}

.cl-13__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.cl-13__btn {
  flex: 1;
  min-height: 50px;
  padding: 0 22px;
  border: 0;
  border-radius: 22px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 680;
  color: oklch(0.25 0.06 45);
  cursor: pointer;
  background: var(--cl-13-accent);
  box-shadow: 0 14px 24px -10px var(--cl-13-shade),inset 0 -10px 16px -9px var(--cl-13-shade),inset 0 12px 16px -7px var(--cl-13-light);
  transition: translate .2s,box-shadow .2s,scale .2s cubic-bezier(.2,.8,.3,1.4);
}

.cl-13__btn:hover {
  translate: 0 -3px;
}

.cl-13__btn:active {
  scale: 1 .94;
  translate: 0 3px;
  box-shadow: inset 0 12px 18px -8px var(--cl-13-shade);
}

.cl-13__save {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: none;
  border: 0;
  border-radius: 20px;
  color: var(--cl-13-mut);
  cursor: pointer;
  background: color-mix(in oklch,var(--cl-13-clay) 62%,white);
  box-shadow: 0 10px 18px -10px var(--cl-13-shade),inset 0 -8px 13px -8px var(--cl-13-shade),inset 0 10px 13px -6px var(--cl-13-light);
  transition: color .25s,translate .2s;
}

.cl-13__save:hover {
  color: var(--cl-13-ink);
  translate: 0 -3px;
}

.cl-13__save:active {
  translate: 0 3px;
  box-shadow: inset 0 10px 16px -7px var(--cl-13-shade);
}

.cl-13__btn:focus-visible,
.cl-13__save:focus-visible {
  outline: 3px solid var(--cl-13-ink);
  outline-offset: 3px;
}

.cl-13__chip {
  font-family: ui-monospace,Menlo,Consolas,monospace;
  font-size: 11.5px;
  color: var(--cl-13-mut);
  padding: 9px 16px;
  border-radius: 99px;
  text-align: center;
  background: oklch(1 0 0/.55);
  box-shadow: inset 0 -4px 10px -8px var(--cl-13-shade),inset 0 6px 10px -6px oklch(1 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .cl-13 * {
    transition-duration: .01ms !important;
  }
}
```

How this works

Two details separate a good clay card from a rounded rectangle with a shadow.

1. Concentric radii. A child inside a clay container must subtract the padding from the parent radius, or the curves fight:

.card{ --r:40px; --p:14px; border-radius:var(--r); padding:var(--p); }
.card img{ border-radius:calc(var(--r) - var(--p)); }

Get this wrong by 8px and the card looks subtly broken in a way nobody can name.

2. Container queries, not media queries. The card is a component; it should respond to its own box:

.card{ container-type:inline-size; }
@container (min-width:420px){ .card{ grid-template-columns:150px 1fr; } }

The photo sits in its own clay well — an inset shadow over the image via a pseudo-element — so the picture reads as inlaid material rather than pasted on top. Hover raises the card one tier (demo 07's rule) and nudges the image scale by 3%, clipped by the concentric radius, which is enough motion to feel alive without a card that jumps.

Make it yours

  • Media ratio: swap aspect-ratio on the figure for 1/1, 4/3 or 16/9 — the concentric radius math is unaffected.
  • Skeleton loading: a @keyframes shimmer inside the image well doubles as the loading state; keep the well, remove the img.
  • Clickable card: wrap the title in an <a> and add .card:has(a:focus-visible){outline:...} — never make the whole card a link, it breaks text selection and copy.
  • Compact variant: drop the radius to 28px and the padding to 10px for dense grids; the ratio between them is what must stay constant.

Gotchas — read before shipping

  • overflow:hidden on the card clips its own inset highlight at the corners. Clip the image instead, and keep the insets on the card.
  • Images inside clay need the same radius as their well or the square corners poke out from under the inset shadow.
  • Container queries need container-type:inline-size on the element you are querying — the query applies to descendants, not to the container itself.
  • Always give the img explicit width/height or an aspect-ratio to prevent layout shift; a clay card that jumps on load undoes all the polish.
  • Hover-lift plus a box-shadow transition on hundreds of cards will drop frames. Transition transform only and pre-declare both shadow stacks (demo 20).

Browser support

ChromeSafariFirefoxEdge
114+17.5+121+114+

Floor set by oklch(), color-mix(), backdrop-filter, @container, text-wrap as this demo is written. The core technique itself goes back further — Chrome 105+.

Container queries: Chrome 105 / Safari 16 / Firefox 110. Without them the card stays in its stacked layout, which is a perfectly good fallback.

Techniques used in this demo

container queriesMDN ↗loading="lazy"MDN ↗backdrop-filterMDN ↗text-wrap: prettyMDN ↗radial-gradient()MDN ↗grid-templateMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →