Neumorphism CSS Design Complete Guide

Neumorphism emerged in 2020 as a design trend blending skeuomorphism and flat design. It creates the illusion of elements extruded from or pressed into the background using carefully placed shadows.

The technique relies on a monochromatic palette and two opposing shadows — one light, one dark — applied to the same element. Understanding the math behind it unlocks consistent, professional results.

What is neumorphism

Neumorphism (or "new skeuomorphism") creates a soft, extruded appearance by placing a light shadow on the top-left and a dark shadow on the bottom-right of an element. The background and element share the same base color, creating a seamless blend. Unlike flat design, neumorphism implies physical depth and tactile texture without photorealistic detail.

The dual shadow technique

The core of neumorphism is the dual box-shadow: one light shadow offset toward the light source (top-left), and one dark shadow offset away from it (bottom-right). The shadow color is derived by lightening and darkening the background hue by 10–15%. Both shadows use a blur radius of 20–30px and zero spread for soft edges.

Color requirements

Neumorphism only works within a narrow color range. The background must be a mid-tone — neither too light nor too dark — and the light and dark shadows must share the same hue. Here is the CSS pattern:

.card {
  background: #e0e5ec;
  box-shadow:
    8px 8px 20px #b8bec7,
    -8px -8px 20px #ffffff;
  border-radius: 12px;
}

Convex vs concave

Convex elements (raised) use outward shadows: light top-left, dark bottom-right. Concave elements (pressed) use inward shadows with the `inset` keyword, reversing the illusion. Toggle between states to indicate pressed buttons or active inputs. Combining outward and inset shadows on the same element can simulate a toggle switch.

Accessibility problems

Neumorphism's low contrast between the element and background frequently fails WCAG 2.1 AA requirements (minimum 3:1 for UI components). Text placed on neumorphic surfaces often falls below 4.5:1. Solutions: increase shadow opacity, use a border for focus states, or reserve neumorphism for decorative elements only. Always test with a contrast checker.

When to use neumorphism

Neumorphism works best for dashboards, clocks, audio players, and kiosks where brand aesthetics outweigh strict accessibility needs. Avoid it for primary navigation and text-heavy interfaces. Hybrid approaches — neumorphic cards with flat content inside — balance visual interest and usability.

FAQ