What is Neumorphism?

Neumorphism, short for new skeuomorphism, draws controls as if they were molded from the same material as the background. A card or button has the same fill as the page and is defined only by two shadows: a light one toward the light source and a dark one away from it. Pressed states swap to inset shadows so the element looks pushed in. The style spread through design showcases around 2020 and is still used for smart home panels, music apps and dashboards that want a soft, tactile look.

How it is built

The entire effect is a background color and a pair of box shadows, with the offsets pointing in opposite directions:

.neu {
  background: oklch(0.93 0.01 260);
  border-radius: 16px;
  box-shadow:
    -6px -6px 14px oklch(1 0 0 / 0.9),
    6px 6px 14px oklch(0.7 0.02 260 / 0.5);
}
.neu:active {
  box-shadow:
    inset -4px -4px 10px oklch(1 0 0 / 0.9),
    inset 4px 4px 10px oklch(0.7 0.02 260 / 0.5);
}

Both shadows must agree on one light direction, or the surface looks warped. The page background must be a mid-light tint, not pure white, because the highlight needs room to be lighter than the surface.

Accessibility problems

• Low non-text contrast. WCAG 1.4.11 asks for 3:1 contrast for the visual boundaries that identify a control. Soft shadows on a same-color background rarely reach it, so buttons and inputs are hard to find.
• Ambiguous states. The difference between raised and pressed, or on and off, is a subtle shadow change that many users cannot see. Pair states with a color, icon or label change.
• Weak focus indication. Add a clear focus-visible ring; a shadow shift is not enough.
• Dark mode. On dark backgrounds the highlight shadow looks muddy. Most neumorphic designs need separate tuning for dark mode.

Using it responsibly

Keep the soft extrusion for large, decorative surfaces like cards and panels, and give interactive controls a visible border or a stronger fill. Keep text contrast at normal levels regardless of style. Treat the shadows as design tokens so every component uses the same light direction.

MiniDev UI takes the useful part of the idea, a single consistent light source, without giving up contrast. The LightProvider sets one light position for the page, and tokens such as shadow-raised and shadow-key fall away from it, while every control keeps a hairline border. The paper and metal materials go further toward tactile surfaces. The CSS shadows from one light source guide explains the technique, and glassmorphism is the translucent counterpart.