GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

Neumorphism Design Kit: 9 Soft-Shadow Sections

· Godrich · 9 items · 17 min read

Design trendsPage templateCSS onlyLanding pageHero sectionCTA

Neumorphism design keeps a card's background nearly identical to the page behind it, then adds one light shadow and one dark shadow facing opposite ways so

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 of neumorphism web design actually built with it — scroll from the nav down to the footer once before you dig into the individual pieces below.

Open the full page

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. Elsewhere in the same design pillar, that gray canvas turns into a dark instrument panel in HUD Interface Design and lifts into candy color in Pastel Website Design Kit. That's also the honest yardstick for judging a neumorphism kit: less by how many parts it ships than by how reliably one surface crosses between pressed and raised on nothing but a shadow sign.

Soft-shadow hero01 hero-neu Pressed-in nav indicator02 nav-neu Embossed card grid03 card-grid-neu Recessed icon list04 feature-list-neu Raised recommended plan05 pricing-neu Socketed avatar + bubble06 testimonial-neu Breathing-glow CTA band07 cta-band-neu Rounded-top footer08 footer-neu Neumorphic buttons & inputs09 buttons-inputs-neu

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

01Soft-shadow hero

What moves

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.

Soft-shadow hero
Open in a new tab

01 · Soft-shadow hero — Measured area 16.376% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

동색 표면이중 그림자radius 16

In the code

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

What moves

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.

Pressed-in nav indicator
Open in a new tab

02 · Pressed-in nav indicator — Measured area 3.481% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

inset 트랙raised 인디케이터translateX 25%

In the code

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

What moves

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.

Embossed card grid
Open in a new tab

03 · Embossed card grid — Measured area 23.212% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

동색 표면raised 깊이 변화2열→1열

In the code

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

What moves

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.

Recessed icon list
Open in a new tab

04 · Recessed icon list — Measured area 16.408% · moving frames 22/23Original by GODRICH · SCSS and React ship in the zip · See the password

inset 칩raised 행순백 대신 6% 눌린 캔버스

In the code

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

What moves

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.

Raised recommended plan
Open in a new tab

05 · Raised recommended plan — Measured area 4.956% · moving frames 9/23Original by GODRICH · SCSS and React ship in the zip · See the password

inset 일반 플랜raised 추천 플랜press 애니메이션

In the code

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

What moves

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.

Socketed avatar + bubble
Open in a new tab

06 · Socketed avatar + bubble — Measured area 8.492% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

inset 아바타raised 말풍선어긋난 부유

In the code

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

What moves

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.

Breathing-glow CTA band
Open in a new tab

07 · Breathing-glow CTA band — Measured area 11.604% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

radial-gradient 글로우raised 밴드press 버튼

In the code

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

What moves

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.

Rounded-top footer
Open in a new tab

08 · Rounded-top footer — Measured area 4.024% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · See the password

raised 패널inset 칸3열→1열

In the code

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

What moves

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.

Neumorphic buttons & inputs
Open in a new tab

09 · Neumorphic buttons & inputs — Measured area 6.993% · moving frames 7/23Original by GODRICH · SCSS and React ship in the zip · See the password

raised↔inset 반전radius 12focus-visible 링

In the code

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.

result

Where it breaks (the trap)

neumorphism css — where does it break?

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. Reproducing this soft shadow pair inside a mail app's rendering engine runs into a wall of its own, noted in the trap section of 9 Transactional Email Templates. 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

What we checked

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.

Where to go next

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 ui design 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. Other routes to a first screen on a dark canvas are gathered in Hero Section Design.

Enter the archive password

The password is inside this article. You will find it as you read.