Neumorphism Box Shadow: The Two-Layer Formula and Its Limits

Neumorphism (soft UI) breaks the normal shadow rule on purpose. Instead of lifting a white card off a gray page with one dark shadow, the element and the page are the same color, and two opposing shadows — one light, one dark — make the shape appear pressed out of (or into) the surface itself. There is no second surface color to hide behind: if the two layers are wrong, nothing else rescues the effect.

The formula

Two layers, opposed offsets, matching blur. The light layer goes up-left, the dark layer down-right, implying a light source from the top-left corner. On a light surface the light layer is near-opaque white; the dark layer stays low-alpha black so it reads as shading, not dirt.

box-shadow:
  -8px -8px 16px #ffffff,
  8px 8px 16px rgba(0, 0, 0, 0.16);

Here it is live — the same two layers the generator's Neumorphism preset ships, on a surface that matches its stage exactly, which is the whole trick:

box-shadow: -8px -8px 16px #ffffff, 8px 8px 16px rgba(0, 0, 0, 0.16);

Why the background must match

The white layer only reads if the surface it lands on is the same color as the element — on a pure white page the light half vanishes, and you are left with an ordinary dark drop shadow. That is also why neumorphism forces a single flat background: move the element onto a card, a gradient, or a different section color and the illusion collapses at the boundary.

Dark mode works the same way with the roles kept: a dark surface color for both element and stage, a light layer at moderate alpha, and a deeper black layer for the opposite side. The formula is symmetric; only the palette flips.

The inset (pressed) variant

Flip both layers inside and the surface reads as pressed into the page — the classic soft-UI button-down and input-well state. Directions reverse with the inset: the dark layer now sits toward the top-left where light would be blocked, the light layer toward the bottom-right where it would catch the rim.

box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.16), inset -6px -6px 12px #ffffff;

Where it works — and where it doesn't

Neumorphism is at its best on decorative, clearly-bounded surfaces: a dashboard of large stat tiles, a media-player knob, a toggle whose on/off state is obvious, a static hero panel. The extruded look is the point, and nothing depends on the tile being obviously clickable.

• Interactive controls need boundaries. When the button's color equals the page's color, only faint shading separates them — hover, focus, and disabled states all have to be solved separately, with a real focus ring (a zero-blur spread ring) rather than more shading.
• Text-heavy UI gains nothing. The style adds no information to lists, forms, or tables; it only adds two shadows per element to keep consistent.
• One background, ever. Sections with different backgrounds each need their own matched light/dark alphas, or the white layer blows out on the darker stage.
• Stack carefully. Neumorphism's two layers plus a hover elevation layer compound — keep every additional layer at low alpha, or the extrusion turns into a smudge.

A working checklist

1. 01Pick the surface color and use it for both the page stage and the element background — exactly the same value.
2. 02Add the light layer at -X -Y with a 16–24px blur; near-opaque white on light surfaces.
3. 03Add the dark layer at +X +Y with the same blur; keep it around 0.12–0.18 alpha.
4. 04Give interactive versions an explicit focus ring — for example 0 0 0 2px of an accent — so keyboard users are not relying on shading.
5. 05Pair the pressed state with the inset variant so the control has a clear down position.