Neumorphism, Explained: The Soft UI Shadow Trick and Its One Real Weakness

The first time I tried to build a neumorphism button from a Figma mockup, I spent twenty minutes convinced my CSS was broken. The colors matched the spec, the radius matched, and the result on screen was a flat grey rectangle with a faint smudge around it. Nothing soft, nothing pressed, nothing that looked like the mockup. The problem was not a typo. I had written one shadow when the entire style depends on two.

That is the whole secret of the soft UI look, and once you see it you cannot unsee it. Below is how the trick works, why it has a built-in accessibility problem, and when it is actually the right choice instead of a Dribbble flex that fails an audit.

The same-color background is the foundation

Most UI depth tricks rely on color difference. A card sits on a page because the card is white and the page is grey. A drop shadow reads as elevation because the shadow is darker than everything around it. Neumorphism throws that away. The element and its background are the same color. The button is #e0e5ec, the surface behind it is #e0e5ec, and if you stopped there you would see a rectangle that is invisible against its own background.

Depth comes entirely from light. In the physical world, a shape that bulges out of a surface under directional light has a highlight on the side facing the light and a darker depression on the side facing away. Neumorphism fakes that with two shadows of the same hue as the background — one lighter, one darker — offset in opposite directions. Your eye reads the pair as rounded volume. Remove the matching background, give the shape its own fill, and the illusion collapses into "a tinted panel with two unrelated shadows."

Two box-shadows, one lighter and one darker

Here is the concrete mechanic, because this is the part people get wrong. Neumorphism uses two box-shadow values, both the same color family as the background, one lighter and one darker, offset in opposite directions, to fake an extruded or pressed surface. One shadow alone always reads as a flat panel with a drop shadow. The pair carves volume.

A worked example — a convex (raised) neumorphic button on a light surface, light source at the top-left:

.neu-button {
  background: #e0e5ec;
  border-radius: 16px;
  padding: 14px 28px;
  border: none;
  color: #4a5568;
  box-shadow:
     6px  6px 12px rgba(163, 177, 198, 0.6),   /* dark, lower-right */
    -6px -6px 12px rgba(255, 255, 255, 0.9);    /* light, upper-left */
}

The dark shadow drops to the lower-right (away from the light). The light shadow sits to the upper-left (toward the light). Equal offsets, equal blur, mirrored direction, alphas tuned so neither overpowers the other. That is the entire technique.

To invert it into a concave (pressed) surface — the canonical look for inputs and active states — you swap to two inset shadows and flip which corner gets which color:

.neu-input {
  background: #e0e5ec;
  border-radius: 12px;
  box-shadow:
    inset  4px  4px  8px rgba(163, 177, 198, 0.6),
    inset -4px -4px  8px rgba(255, 255, 255, 0.9);
}

Same colors, same radius, same blur. The only difference is the inset keyword and which direction reads as "into the surface" instead of "out of it." Convex for buttons and cards; concave for inputs and pressed states. Computing those mirrored offset and alpha pairs by hand for every color is exactly the tedium the neumorphism generator removes — pick a background color and a light direction, and it emits both shadows already balanced, plus the Tailwind, SwiftUI, and styled-components versions of the same shape.

Low contrast is the price you pay

Now the weakness, and it is structural, not a bug you can patch. The soft pressed feeling requires the surface, the background, and the text to all live within a few percent of the same lightness. That is what makes the volume read as gentle instead of harsh. It is also exactly the condition that drags color contrast toward 1:1.

WCAG AA asks for a 4.5:1 contrast ratio for body text and 3:1 for large text. A classic light-grey neumorphic card with mid-grey label text routinely lands around 2:1 or worse. You will not notice in the design tool, where you are staring at shapes, not reading paragraphs. You will notice when a real user with average vision squints at your button label, or when an accessibility audit flags every text element on the screen.

I treat the live contrast warning as a gate, not a suggestion. If the ratio is red, I have three honest options: darken the text color until it passes (which dulls the soft effect but keeps the surface), switch to an icon-only control with a 3:1 stroke, or confine the neumorphism to purely decorative surfaces and put high-contrast text outside the soft area. What I do not do is ship it red and hope nobody runs Lighthouse. The style does not get an accessibility exemption for being pretty.

When neumorphism is the right call

So when should you reach for it? Neumorphism shines on low-information, tactile surfaces where the joy is in the feel rather than the reading: a music player's transport controls, a smart-home toggle panel, a calculator, a settings screen with big iconic switches. iOS and macOS borrowed the vocabulary for Control Center toggles precisely because those are icon-first, text-light surfaces where the soft pressed metaphor carries real meaning — a switch that looks like it physically clicks.

It is the wrong call for anything text-dense or conversion-critical. Forms full of labels, dashboards packed with numbers, primary call-to-action buttons that must be unmissable — these need contrast, and contrast is the one thing neumorphism cannot give you. A common and sensible pattern is to mix: neumorphic cards and toggles for the tactile bits, then a high-contrast button generated separately for the actual CTA. If you want that CTA to pop instead of recede, the CSS button generator is the better starting point for a bold, accessible, high-contrast control to sit alongside the soft surfaces.

A short checklist before you ship

A few rules I keep taped to my monitor, metaphorically:

• Keep the shape color equal to the background color (a ±5% tint at most). Drift further and the two shadows stop reading as carved depth.
• Always copy both shadow lines. Copying one is the single most common way to ship a flat-looking "neumorphic" button.
• Do not crank distance and blur past realistic limits chasing more 3D. Past large offsets the effect stops looking soft and starts looking like a floating panel with a grey aura.
• Read the WCAG number before you commit, every time.

Neumorphism is a one-trick style, and the trick is genuinely lovely when it fits. Two mirrored shadows on a same-color surface, lit from a single consistent direction, is enough to make a flat screen feel like something you could press with your thumb. Just respect the trade: the same low contrast that makes it soft is the same low contrast that fails the audit. Build it eyes-open, scope it to where it belongs, and it earns its place.

---

Made by Toolora · Updated 2026-06-13