SolutionsCase StudiesAI ToolsResourcesAboutContact
Get Your Free AI Automation Audit Book a Free 30-Minute Strategy Call
Playground~/frontend Open editor

~/css/tailwind-claymorphism

6 Tailwind Claymorphism

6 TailwindPublished 2026-10-05Free · no sign-up

Six clay components in Tailwind: a puffy card, a button that squishes when pressed, pastel app icons, a switch built from a checkbox, a progress bar and a profile badge with a floating avatar.

RelatedCSS Design StylesCSS Retro UICSS Minimalist UICSS 3D EffectsCSS Neon EffectsCSS Neumorphism

01. Tailwind Clay Card

TailwindClaymorphismCard

A puffy pastel card from one arbitrary shadow utility holding three shadows: an outer one for lift and two insets, light at the top and dark at the bottom, that round the surface like clay.

View code 
<article class="w-56 max-w-full rounded-[32px] bg-pink-200 p-6 text-pink-950 shadow-[14px_16px_28px_-10px_rgba(190,24,93,.45),inset_-6px_-8px_14px_rgba(190,24,93,.25),inset_6px_8px_14px_rgba(255,255,255,.75)]">
  <span aria-hidden="true" class="grid size-14 place-items-center rounded-[20px] bg-pink-50 text-3xl shadow-[inset_-3px_-4px_8px_rgba(190,24,93,.2),inset_3px_4px_8px_#fff]">🍓</span>
  <h3 class="mt-3 text-lg font-bold">Berry smoothie</h3>
  <p class="text-sm text-pink-900">Strawberry, oat milk, honey.</p>
</article>

02. Tailwind Squishy Clay Button

TailwindClaymorphismButton

A chunky cyan button that squishes when pressed: active:scale-x-95 active:scale-y-90 flattens it and an active: shadow swaps the inner light and dark, so it looks pushed into the surface.

View code 
<button type="button" class="rounded-[26px] bg-cyan-200 px-8 py-4 text-lg font-extrabold text-cyan-950 shadow-[8px_10px_18px_-8px_rgba(8,145,178,.6),inset_-4px_-6px_10px_rgba(8,145,178,.35),inset_4px_6px_10px_rgba(255,255,255,.8)] transition duration-100 active:scale-x-95 active:scale-y-90 active:shadow-[3px_4px_10px_-6px_rgba(8,145,178,.6),inset_4px_6px_10px_rgba(8,145,178,.3),inset_-4px_-6px_10px_rgba(255,255,255,.7)] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-4 focus-visible:outline-cyan-700">Let’s play</button>

03. Tailwind Clay App Icons

TailwindClaymorphismIcons

Three pastel app icons sharing one shadow recipe in different hues. Each icon's shadow colours are written as arbitrary rgba values matching its fill, which keeps the clay from looking grey.

View code 
<ul class="flex gap-4 text-xs font-semibold text-slate-800">
  <li class="grid justify-items-center gap-2"><span aria-hidden="true" class="grid size-16 place-items-center rounded-[22px] bg-amber-200 text-2xl shadow-[8px_10px_16px_-8px_rgba(180,83,9,.5),inset_-4px_-5px_9px_rgba(180,83,9,.3),inset_4px_5px_9px_rgba(255,255,255,.75)]">☀</span>Weather</li>
  <li class="grid justify-items-center gap-2"><span aria-hidden="true" class="grid size-16 place-items-center rounded-[22px] bg-green-200 text-2xl shadow-[8px_10px_16px_-8px_rgba(21,128,61,.5),inset_-4px_-5px_9px_rgba(21,128,61,.3),inset_4px_5px_9px_rgba(255,255,255,.75)]">✿</span>Garden</li>
  <li class="grid justify-items-center gap-2"><span aria-hidden="true" class="grid size-16 place-items-center rounded-[22px] bg-indigo-200 text-2xl shadow-[8px_10px_16px_-8px_rgba(67,56,202,.5),inset_-4px_-5px_9px_rgba(67,56,202,.3),inset_4px_5px_9px_rgba(255,255,255,.75)]">♪</span>Music</li>
</ul>

04. Tailwind Clay Switch (No JavaScript)

TailwindClaymorphismSwitch

A clay toggle built from a visually hidden checkbox with role="switch" and peer-checked: utilities, so it needs no script. The sunken track turns green and the puffy knob slides across when it is on.

View code 
<label class="inline-flex cursor-pointer items-center gap-3 text-sm font-semibold text-slate-800">
  <input type="checkbox" role="switch" class="peer sr-only">
  <span aria-hidden="true" class="relative h-11 w-20 rounded-full bg-slate-200 shadow-[inset_4px_5px_9px_rgba(0,0,0,.15),inset_-4px_-5px_9px_rgba(255,255,255,.9)] transition-colors peer-checked:bg-green-300 peer-focus-visible:outline peer-focus-visible:outline-[3px] peer-focus-visible:outline-offset-2 peer-focus-visible:outline-green-700 after:absolute after:left-1.5 after:top-1.5 after:size-8 after:rounded-full after:bg-white after:shadow-[4px_5px_10px_-4px_rgba(0,0,0,.35),inset_-3px_-4px_7px_rgba(0,0,0,.12),inset_3px_4px_7px_#fff] after:transition-transform peer-checked:after:translate-x-9 motion-reduce:after:transition-none"></span>
  Holiday mode
</label>

05. Tailwind Clay Progress Bar

TailwindClaymorphismProgress

A playful progress bar: a sunken clay track with a puffy violet fill and a percentage label. It uses role="progressbar" with value attributes, so the number is available without seeing the bar.

View code 
<div class="w-full max-w-xs">
  <div class="flex justify-between text-sm font-bold text-violet-950"><span id="twcl5l">Level 4</span><span>65%</span></div>
  <div role="progressbar" aria-labelledby="twcl5l" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" class="mt-2 h-6 rounded-full bg-violet-100 p-1 shadow-[inset_3px_4px_8px_rgba(91,33,182,.2),inset_-3px_-4px_8px_rgba(255,255,255,.9)]">
    <div class="h-full w-[65%] rounded-full bg-violet-400 shadow-[inset_-2px_-3px_6px_rgba(91,33,182,.4),inset_2px_3px_6px_rgba(255,255,255,.6)]"></div>
  </div>
</div>

06. Tailwind Clay Profile Badge

TailwindClaymorphismProfile

A profile badge with a clay avatar bubble floating over the top edge of a clay card, made with an absolutely positioned circle and a negative top offset. The avatar is decorative; the name is the heading.

View code 
<article class="relative mt-8 grid w-52 max-w-full justify-items-center rounded-[30px] bg-amber-200 px-5 pb-5 pt-12 text-amber-950 shadow-[12px_14px_24px_-10px_rgba(180,83,9,.5),inset_-6px_-8px_14px_rgba(180,83,9,.25),inset_6px_8px_14px_rgba(255,255,255,.7)]">
  <span aria-hidden="true" class="absolute -top-8 grid size-16 place-items-center rounded-full bg-orange-300 text-3xl shadow-[6px_8px_14px_-6px_rgba(180,83,9,.55),inset_-4px_-5px_9px_rgba(180,83,9,.3),inset_4px_5px_9px_rgba(255,255,255,.7)]">🦊</span>
  <h3 class="text-xl font-extrabold">Robin</h3>
  <p class="text-sm text-amber-900">Level 12 explorer</p>
</article>

About these Tailwind Claymorphism

One shadow utility, three shadows

An arbitrary shadow-[…] can hold an outer shadow and two insets separated by commas, which is the whole clay recipe.

Tint the shadows

Write shadow colours as rgba of a darker shade of the fill, so pink clay casts pink shadows and stays bright.

Big radii

Clay needs generous rounding such as rounded-[32px]; sharp corners break the moulded look.

States beyond shading

Soft shading alone does not show focus or on and off clearly; add focus outlines and colour changes like the green track.

Frequently asked questions

Can I reuse the shadow?

Yes. Add it to theme.extend.boxShadow in your config and use a short class name.

Does the switch need JavaScript?

No. It is a checkbox with role="switch" styled with peer-checked:.

Is there a CSS version?

Yes, see the CSS claymorphism collection.