Neumorphism Design Kit: 9 Soft-Shadow Sections

It's that soft, embossed button you've screenshotted without knowing its name. Since it's mostly traded around as screenshots, here's a full landing page actually built with it — scroll from the nav down to the footer once before you dig into the individual pieces below.

The page above breaks down into nine standalone sections, laid out as a grid further down. The order follows how a visitor's eyes actually move down a page — get noticed, browse, check pricing, trust, act, sign up — rather than any popularity ranking. Three of them (the recessed icon list, the breathing-glow CTA band, and the buttons/inputs pair) animate a single surface between raised and sunken by flipping the sign on the same shadow pair, which is the one move this whole style is built on.

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

• 01 Soft-shadow hero
• 02 Pressed-in nav indicator
• 03 Embossed card grid
• 04 Recessed icon list
• 05 Raised recommended plan
• 06 Socketed avatar + bubble
• 07 Breathing-glow CTA band
• 08 Rounded-top footer
• 09 Neumorphic buttons & inputs

01Soft-shadow hero

The card's fill is nearly the same tone as the stage behind it, and only a pair of opposite-facing shadows makes it read as lifted off that background. The only actual color contrast on the whole panel comes from two soft accent-tinted circles drifting behind it.

<div class="relative mx-auto max-w-xl flex flex-col items-start gap-4
            rounded-neu bg-surface p-10 shadow-neu-raised">
  <p class="text-xs font-bold uppercase text-accent">Neumo</p>
  <h1 class="text-4xl font-extrabold leading-tight">A screen that looks pressed, not painted</h1>
  <button class="rounded-pill bg-surface px-6 py-3 text-sm font-bold text-accent
                 shadow-neu-raised">Start for free</button>
</div>

02Pressed-in nav indicator

The whole tab track sits sunken behind an inset shadow, and only the active tab gets the opposite, raised shadow so it visibly pops out of that groove. Give the tab 25% of the track's width and translateX(100%) always lands it exactly one slot over.

<nav class="flex items-center gap-4 rounded-pill bg-surface px-3 py-2
            shadow-neu-raised">
  <div class="relative flex flex-1 rounded-pill bg-surface p-1 shadow-neu-press">
    <span class="absolute inset-y-1 left-1 w-1/4 rounded-pill bg-surface
                 shadow-neu-raised"></span>
    <span class="relative z-10 flex-1 text-center text-xs font-semibold py-2">Home</span>
  </div>
</nav>

03Embossed card grid

Every tile shares the exact fill color of the page behind it, and its shadow depth swells and settles together with a small lift on a loop — the color never shifts, only how far off the page it appears to sit. Stagger each tile's start time and the four cards rise in a slow 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-neu bg-surface p-5 shadow-neu-raised">
    <span class="h-7 w-7 rounded-control bg-accent"></span>
    <p class="text-sm font-semibold">Fast search</p>
  </div>
</div>

04Recessed icon list

Each pill-shaped row sits raised, while the icon chip inside it alone sinks inward — one row shows both directions of the same technique at once. The canvas is nudged 6% away from pure white so both the light and dark sides of the shadow have somewhere to go.

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

05Raised recommended plan

The standard plan sits recessed while the recommended one alone carries a deep, raised shadow — no comparison table needed to see which plan is being pushed. The badge has to sit half outside the card's own border, because tucking it inside the padding collides with the plan name underneath.

<div class="relative flex-[1.1] rounded-neu bg-surface p-6 pt-8
            shadow-neu-raised">
  <span class="absolute -top-3 left-6 rounded-pill bg-surface px-3 py-1
               text-xs font-bold text-accent shadow-neu-raised">Recommended</span>
  <p class="font-bold">Pro</p>
</div>

06Socketed avatar + bubble

The avatar sinks into a round socket with an inward shadow, while the quote bubble beside it puffs outward on the opposite shadow direction, and each drifts on its own timing offset. That small timing gap is what keeps them from reading as one fused shape.

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

07Breathing-glow CTA band

A soft radial glow hidden behind the raised band swells and fades on a slow loop, while the button riding on top presses inward and springs back. overflow: hidden on the band keeps that glow from spilling past its own rounded corners.

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

08Rounded-top footer

The footer panel itself sits raised above the page, while each column inside it deepens and shallows its own inset shadow on a slightly different beat, like a slow ripple moving across the row. No divider lines are needed between columns — the shadow alone marks where one ends and the next begins.

<footer class="grid grid-cols-3 gap-4 rounded-t-neu bg-surface px-4
               pt-8 pb-6 shadow-neu-raised">
  <div class="rounded-control bg-surface p-5 shadow-neu-press">
    <p class="text-xs font-bold uppercase text-ink/50">Product</p>
    <p class="text-sm font-semibold">Features</p>
  </div>
</footer>

09Neumorphic buttons & inputs

The button's shadow sign flips from raised to inset on press, while the input stays inset at rest and only gains a high-contrast ring when it's focused. This single pair carries the whole idea behind the style: flip the sign on the same shadow pair and the same surface reads as either pushed out or pressed in.

<button class="rounded-control bg-surface px-5 py-3 text-sm font-bold
               text-accent shadow-neu-raised">Save</button>
<label class="relative block rounded-control bg-surface p-1
              shadow-neu-press">
  <input class="w-full rounded-control bg-transparent px-4 py-3
                text-sm outline-none" type="text">
</label>

Custom tailwind.config

Every color, radius, and shadow value lives in this one file, so the full page and all nine standalone sections stay locked to the same surface tone. The raised and pressed shadow pairs each get one name — shadow-neu-raised and shadow-neu-press — instead of being retyped by hand each time.

theme: {
  extend: {
    colors: {
      surface: "#e0e5ec",
      ink: "#3d4457",
      accent: "#2f6df6",
    },
    borderRadius: {
      neu: "20px",
      control: "12px",
    },
    boxShadow: {
      "neu-raised": "9px 9px 16px rgba(163,177,198,.6), -9px -9px 16px rgba(255,255,255,.6)",
      "neu-press": "inset 6px 6px 10px rgba(163,177,198,.5), inset -6px -6px 10px rgba(255,255,255,.6)",
    },
  },
},

Vibe-coding prompt

Keep the config file above in your project, then hand Claude Code or Cursor the short instruction below instead of typing out every class by hand. The complete wording ships inside the zip's prompt.md.

Give every card, button, and input the same surface (#e0e5ec) background — depth
comes from shadow, never from a color change. Anything that should look raised
gets shadow-neu-raised; anything that should look pressed in gets shadow-neu-press.
Never set the background to pure white — the light half of the shadow can't be
brighter than white, so it disappears. Draw a separate accent-colored outline on
:focus-visible states.

That instruction, applied to page/index.html and rendered at a 1280px viewport, produced the full-page capture below.

Where it breaks (the trap)

Testing at a narrow viewport surfaced the first problem: the hero, pricing, and CTA band all fixed their inner padding as flat pixel values, and at 320px they overflowed — the pricing card's recommended-plan badge text spilled past the card's own edge on top of that. Switching that padding (and the pricing badge's offset) to clamp() cleared the overflow on every item at 320px. The second issue only showed up once the background was set to pure white (#ffffff): the light half of the shadow pair had nowhere brighter to go, so it vanished entirely and only the dark half remained, cutting the depth in half. The password juzcd872 on this zip unlocks the corrected build, where the canvas sits about 6% darker than pure white so both shadow directions stay visible.

A third trap shows up in the pricing card specifically: put the "Recommended" badge inside the card's own padding and it overlaps the plan name text below it, so it has to float half outside the card's top edge instead.

All nine demos check for MDN's prefers-reduced-motion media feature and, once it's on, stop moving and hold each surface at its resting state (raised cards stay raised, buttons stay unpressed). Nothing disappears for a visitor who's turned that setting on — only the drifting, pulsing, and pressing stop.

Accessibility

Neumorphism carries a real, well-documented accessibility complaint. Because a surface's fill barely differs from the page behind it, a resting button or card has close to zero border contrast against its background, which falls short of WCAG 1.4.11 non-text contrast. Relying on shadow alone to signal "this is pressable" can leave low-vision and colorblind visitors without any cue at all. This kit doesn't pretend to solve that — it narrows it instead: every label sits in ink (#3d4457) for solid text contrast, and :focus-visible draws a separate accent-colored ring that has nothing to do with the shadow, so keyboard users at least never lose track of where focus is. MDN's box-shadow docs cover the inset keyword this whole raised/pressed swap depends on, but in production it's worth keeping this style away from anything that absolutely must not be missed, like a checkout button.

More trend write-ups sit in the design trends category, and the about page covers what this site is for overall.

FAQ

What actually separates neumorphism from claymorphism?

Neumorphism keeps a surface's color nearly identical to the page behind it and lets shadow alone carry the depth, while claymorphism gives the card a color that's clearly different from the background and stacks a thick radius on top of the shadow. Because claymorphism's edges stay visible even without the shadow, it's the one that's easier to keep readable for interactive elements.

Why does this break on a pure white or pure black background?

Each half of the shadow pair only works by contrast: the light half has to be brighter than the surface, and the dark half has to be darker than it. A pure white page leaves no brighter tone for the light half, and a pure black page leaves no darker tone for the dark half, so whichever extreme you pick, one direction of the shadow disappears and the depth reads as flat on that side. That's why this kit's canvas sits a few percent off pure white rather than on it.

Does neumorphism hold up in dark mode?

It does, but the two shadow strengths need to move in opposite directions rather than just get inverted. On a dark canvas, the light highlight's opacity should drop while the dark shadow's opacity climbs, or the surface just fades into the background instead of standing even slightly apart from it.