Neumorphism (soft UI)

When to use it, and when not to

Neumorphism had its moment around 2020, and the look still turns up in briefs: controls that seem extruded from a soft grey surface, lit from the top left. It suits a decorative dashboard, a music player mock-up, a landing page hero where nothing critical depends on it. It does not suit forms, settings screens, or anything a user must operate under pressure, for the reason in the section below. This example exists because people search for it and because the generator makes it easy; the caveat is part of the example.

How it is built

Adrian Bece's CSS-Tricks article is the reference most people learned it from, and it defines the mechanism in a sentence: "a core part of neumorphic elements is the use of two shadows: a light shadow and a dark shadow." The element's background must match the surface it sits on. Then the light shadow goes up and left, the dark one down and right, with the same blur and offset so they read as one light source:

.soft {
  background: #e0e5ec;              /* same as the page */
  border-radius: 32px;
  box-shadow:
    -12px -12px 24px rgba(255, 255, 255, 0.9),  /* light, up-left    */
    12px 12px 24px rgba(163, 177, 198, 0.6);    /* dark, down-right  */
}

The generator's Neumorphic category has five variations. The dark shadow's colour is a deeper tone of the surface, never black, or the effect collapses into a normal drop shadow with a highlight. Generous border radius helps; the look reads as moulded plastic, and moulded plastic has no sharp corners.

The contrast problem

Bece is direct about it: "This is a big deal and perhaps the biggest drawback to neumorphism: color contrast. Neumorphic UI elements rely on multiple shadows that help blend the element into the background it is on. Using subtle contrasts isn't actually the best fit for an accessible UI." Blending into the background is the effect and the defect at the same time. Someone with low vision, or anyone on a washed-out laptop screen in daylight, may not see the button at all.

If the brief insists, make the look decorative and the meaning explicit. Add a hairline border or a spread-only shadow at 3:1 against the surface so the edge exists without the blur. Give every control a visible focus ring. Keep the text and icons inside at 4.5:1. And test on a real phone outdoors, which is the test neumorphism most often fails.

Raised and pressed

The pressed state is the same two shadows with the inset keyword on both, which turns the extrusion into a dent. Swap between the two on :active without a transition:

.soft:active {
  box-shadow:
    inset -12px -12px 24px rgba(255, 255, 255, 0.9),
    inset 12px 12px 24px rgba(163, 177, 198, 0.6);
}

The code in four formats

Straight from the generator's readout for this state. Copy the one your project speaks; the output formats guide explains where each goes.

box-shadow:
  -12px -12px 24px rgba(255, 255, 255, 0.9),
  12px 12px 24px rgba(163, 177, 198, 0.6);
border-radius: 32px;

$shadow:
  -12px -12px 24px rgba(255, 255, 255, 0.9),
  12px 12px 24px rgba(163, 177, 198, 0.6);

.element {
  box-shadow: $shadow;
  border-radius: 32px;
}

<div class="shadow-[-12px_-12px_24px_rgba(255,255,255,0.9),_12px_12px_24px_rgba(163,177,198,0.6)] rounded-[32px]"></div>

/* Or name it once in your theme (Tailwind v4): */
@theme {
  --shadow-custom: -12px -12px 24px rgba(255, 255, 255, 0.9), 12px 12px 24px rgba(163, 177, 198, 0.6);
}
/* then use class="shadow-custom" */

.element
  box-shadow -12px -12px 24px rgba(255, 255, 255, 0.9), 12px 12px 24px rgba(163, 177, 198, 0.6)
  border-radius 32px