Neumorphism That Actually Ships

Neumorphism had its moment in 2020, then died in production for two reasons: unusable contrast and undefined states. This site runs on a neumorphic system anyway. Here is what it took to make soft UI survive contact with real users.

Shadows are a state machine

The core mistake in most neumorphic CSS is treating the shadow as decoration. It is not — it is the entire affordance. So it has to be specified like component state:

• Resting: tight dual shadow, light top-left, dark bottom-right. The element sits on the surface.
• Hover: shadows grow and soften. The element lifts.
• Active: shadows invert inward. The element presses into the surface.
• Disabled: permanently pressed, reduced opacity. Visually spent.

.nm-btn--secondary:active {
  transform: scale(0.98);
  box-shadow:
    inset 2px 2px 4px rgba(174, 174, 192, 0.3),
    inset -2px -2px 4px rgba(255, 255, 255, 0.6);
}

The asymmetric transition matters more than the shadow values: press feedback at 80ms, release at 200ms. Instant press, slow settle — that is what makes it feel mechanical instead of mushy.

Contrast is non-negotiable

Soft UI fails WCAG by default because everything is a whisper of the background color. Two rules saved it:

1. Shadows convey depth, never meaning. Anything semantic — focus, selection, error — gets a real outline or accent color on top.
2. Text never participates in the neumorphic game. Foreground colors are picked against the flat background and checked at AA, as if the shadows did not exist.

Dark mode is not an inversion

Flipping the shadow colors produces an embossed plastic look. Dark neumorphism needs a different metaphor — machined metal rather than soft clay: tighter shadows, lower light intensity, and a surface color a few percent lighter than the page background, not darker.

Soft UI is a constraint system. Treat it like one and it ships; treat it like a Dribbble filter and it dies in review.