Claymorphism UI Kit: 9 Puffy Landing Sections

It's a look that keeps resurfacing on Dribbble and Design Twitter, so here's a full one-page landing built in it. Scroll it top to bottom once before you look at the pieces.

Below, the same page is broken into the nine sections it's built from and laid out as a grid. They're ordered the way a visitor actually meets them — get noticed, browse, check the price, trust, act, sign up — not by popularity. Three of the nine (hero, pricing, buttons & inputs) go past a plain card and add a real gesture: drifting, springing, or pressing.

Auto-plays · click a tile to jump to its section · all nine in one zip

• 01 Clay-shape hero
• 02 Capsule nav
• 03 Puffy inflated cards
• 04 Rounded icon chips
• 05 Chubby plan cards
• 06 Round avatar + bubble
• 07 Pastel CTA band
• 08 Rounded-top footer
• 09 Clay buttons & inputs

01Clay-shape hero

Two organic blobs drift behind the headline while the card itself sits lit from the top-left and shadowed from the bottom-right, like it's been pressed into the background. The blob shapes are static — only transform moves.

<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-clay bg-white p-10 shadow-clay-raised">
  <p class="text-xs font-bold uppercase text-accent">Claymolt</p>
  <h1 class="text-4xl font-extrabold leading-tight">A screen that starts soft</h1>
  <button class="rounded-pill bg-ink px-6 py-3 text-sm font-bold text-cream">
    Start for free
  </button>
</div>

02Capsule nav

The whole menu lives inside one pill, and a light chip slides along an inset track to mark the active item. Set the chip to 25% of the track's width and translateX(100%) lands it exactly one slot over.

<nav class="flex items-center gap-4 rounded-pill bg-white/90 px-3 py-2
            shadow-clay-raised">
  <span class="pl-3 font-display font-extrabold text-sm">Claymolt</span>
  <div class="relative flex flex-1 rounded-pill bg-ink/5 p-1 shadow-clay-press">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-cream
                 shadow-clay-raised"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Home</span>
  </div>
</nav>

03Puffy inflated cards

Every tile in the grid looks like it's puffed up off the background — a bright edge on top, a dark one underneath. Offset each card's animation start time and the four tiles inflate in a small wave instead of all at once.

<div class="grid grid-cols-2 gap-4 sm:grid-cols-4">
  <div class="flex flex-col gap-3 rounded-clay bg-white p-5 shadow-clay-raised">
    <span class="h-7 w-7 rounded-control bg-accent"></span>
    <p class="text-sm font-semibold">Fast search</p>
  </div>
</div>

04Rounded icon chips

Each icon sits inside a round chip that looks pressed in, like a stamp, with the label lined up beside it. The chip only carries an inset shadow, which is the one surface in this set that reads as sunken rather than raised.

<ul class="flex flex-col gap-3">
  <li class="flex items-center gap-3 rounded-pill bg-white p-2 pr-5
             shadow-clay-raised">
    <span class="h-9 w-9 flex-none rounded-pill bg-accent
                 shadow-clay-press"></span>
    <span class="text-sm font-semibold">Quick start</span>
  </li>
</ul>

05Chubby plan cards

The recommended plan card is one size bigger than the rest and springs back with a small overshoot on press — no comparison table needed to see which plan is being pushed. The badge has to float half outside the card's own edge, not inside its padding, or it collides with the plan name underneath.

<div class="relative flex-[1.1] rounded-clay bg-white p-6 pt-8
            shadow-clay-raised">
  <span class="absolute -top-3 left-6 rounded-pill bg-accent px-3 py-1
               text-xs font-bold text-cream">Recommended</span>
  <p class="font-bold">Pro</p>
  <p class="mt-1 text-sm text-ink/70">$9/mo</p>
</div>

06Round avatar + bubble

The avatar sits nested in a round frame while the quote bubble puffs up beside it like soft clay. Stagger the avatar's and the bubble's animation start times slightly and they read as two separate objects instead of one.

<div class="flex items-center gap-4">
  <span class="h-14 w-14 flex-none rounded-pill bg-accent
               shadow-clay-raised"></span>
  <div class="flex-1 rounded-clay bg-white p-5 shadow-clay-raised">
    <p class="text-sm font-semibold">"It feels like it wraps around your fingertip."</p>
  </div>
</div>

07Pastel CTA band

The wide band sits as one thick card raised above the background, with a soft glow behind the headline that blooms and fades. overflow: hidden on the card keeps the glow from leaking past its edges.

<div class="relative overflow-hidden rounded-clay bg-ink px-10 py-12
            shadow-clay-raised">
  <span class="absolute -right-16 -top-24 h-64 w-64 rounded-pill
               bg-accent opacity-30 blur-sm"></span>
  <h3 class="relative max-w-md text-3xl font-extrabold text-cream">
    Bring your team in today
  </h3>
</div>

08Rounded-top footer

The footer's top edge curls into a large radius, like it's gently wrapping the section above it. Each link group only gets a faint background and no divider line, so the grid pattern carries all the way to the bottom of the page.

<footer class="grid grid-cols-3 gap-4 rounded-t-clay bg-white/70 px-4
               pt-8 pb-6 shadow-clay-raised">
  <div class="rounded-control bg-ink/[.04] p-5">
    <p class="text-xs font-bold uppercase text-ink/50">Product</p>
    <p class="text-sm font-semibold">Features</p>
  </div>
</footer>

09Clay buttons & inputs

The button flips its shadow inward on press for a real tactile feel, and the input's border turns into a soft inner glow on focus. Both share a slightly smaller radius than the cards around them, so the screen reads as one consistent size scale.

<form class="flex gap-3 rounded-clay bg-white p-6 shadow-clay-raised">
  <label class="relative flex-1 rounded-control bg-cream
                shadow-clay-press">
    <input class="w-full rounded-control bg-transparent px-4 py-3
                  text-sm outline-none" type="email"
           placeholder="Email address">
  </label>
  <button class="rounded-control bg-accent px-5 py-3 text-sm font-bold
                 text-cream shadow-clay-raised">Sign up</button>
</form>

Custom tailwind.config

Colors, radii, and shadows live in one place, so the one-pager and all nine sections stay in sync. The double clay shadow gets a single name — shadow-clay-raised — instead of being retyped everywhere.

theme: {
  extend: {
    colors: {
      cream: "#fff7e6",
      ink: "#17141a",
      accent: "#2f6df6",
    },
    borderRadius: {
      clay: "16px",
      control: "12px",
      pill: "999px",
    },
    boxShadow: {
      "clay-raised": "8px 8px 16px rgba(23,20,26,.28), -8px -8px 16px rgba(255,255,255,.5)",
      "clay-press": "inset 4px 4px 8px rgba(23,20,26,.28), inset -4px -4px 8px rgba(255,255,255,.5)",
    },
    spacing: {
      gutter: "16px",
    },
  },
},

Vibe-coding prompt

Paste the config above into your project, then hand Claude Code or Cursor a short instruction like the one below. The full prompt lives in the zip's prompt.md.

Corners on cards, buttons, and inputs should all use rounded-clay (16px) or
rounded-control (12px) — pick one consistently.
Use shadow-clay-raised (one dual light+dark shadow) for every raised surface.
Don't vary the shadow depth from card to card.
Anything pressable (cards, buttons) should have shadow-clay-press ready for
its pressed state.
Keep the background a single cream tone and reserve accent for emphasis only.

Here's what that instruction produced when applied to page/index.html, captured full-page at a 1280px viewport.

Where it breaks (the trap)

The first thing that broke was the 320px width. The hero, the card grid, and the icon list all fixed their blob size and card padding, and at a narrow viewport the content pushed past its own box by up to 3px, since the blob positions were set in percentages while the container's own height was resolving from its content — the two calculations fought each other. Switching the blob size and card padding to clamp(), and the blob position from percentages to fixed pixel offsets, cleared it on every item at 320px. The second trap was contrast: the nav's active chip was painted the same ink color as the menu labels, so wherever it overlapped a label, that word disappeared entirely. The password y3sdrgr2 on this zip unlocks the fixed version, where the chip is a light cream capsule instead, so the label under it stays legible no matter which item is active.

A third trap sits in the pricing card's badge placement: put it inside the card's own padding and it collides with the plan name text below it, so it has to float half outside the card's top edge instead.

Every one of the nine demos also follows MDN's prefers-reduced-motion docs and, when that's on, drops the animation and freezes on a final state (cards stay raised, buttons stay unpressed). Visitors who've turned on reduced motion lose the drifting blobs and the press feedback, but every card, button, and input is still fully there — nothing is missing, only the motion is gone.

Accessibility

Small text placed on the accent (#2f6df6) background reads with fairly low contrast, so anything badge-sized stays on a cream background, and only large headings get the dark-background, light-text pairing. Every card's box-shadow follows MDN's box-shadow docs for stacking an inset layer against a non-inset one in the same property, which is how one declaration carries both the puffy outer look and the pressed inner one.

Other trend write-ups live in the design trends category, and the about page explains what this whole site covers.

FAQ

How is claymorphism different from neumorphism?

Neumorphism keeps the card almost the same color as the background and relies on shadow alone for depth. Claymorphism gives the card a clearly different color from the background and adds a thick radius on top of the shadow, so contrast and depth both come from the same move — which also makes claymorphism the easier one to keep accessible.

Doesn't a double shadow on every card slow things down?

All nine demos here keep the box-shadow value itself fixed and only animate transform/opacity (item 09 is the one exception, crossfading box-shadow for the press feel), so the shadow isn't recalculated every frame. On a screen with a lot of these cards, the double shadow does add some paint cost, so it's safer to skip the animation on any card that scrolls past quickly.

Does claymorphism work in dark mode?

Yes, but the highlight and shadow strengths need to flip from the light version. On a dark background, the light highlight's opacity should drop and the dark shadow's opacity should rise, or the card ends up blending straight into the background instead of sitting above it.