Neumorphism and Material Design Elevation: Two Box-Shadow Design Systems Explained

Material Design Elevation

Google's Material Design system uses layered shadows to represent how "high" an element sits above the page — buttons, cards, and menus at different elevation levels get progressively larger, softer, more spread-out shadows. The system formalizes this into consistent umbra, penumbra, and ambient shadow layers at each elevation step, so a design stays visually coherent across many components.

.elevation-2 {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.30),
    0 4px 8px rgba(0,0,0,0.25),
    0 16px 32px rgba(0,0,0,0.20);
}

Neumorphism

Neumorphism (also called "soft UI") takes a different approach entirely — instead of an element floating above the page with a dark shadow beneath it, elements appear gently embossed or pressed into the same background they sit on. This effect comes from pairing two shadows in opposite directions: a light shadow on one side and a dark shadow on the other, both using colors close to the background itself.

.neumorphic {
  background: #e0e5ec;
  box-shadow:
    8px 8px 16px #a3b1c6,
    -8px -8px 16px #ffffff;
}

Why They Look So Different

Material elevation clearly separates an element from its background — the shadow implies genuine physical distance and depth. Neumorphism does close to the opposite — the element looks like it's part of the same continuous surface, subtly raised or recessed rather than floating above it. Both are built from the exact same underlying CSS property, just with very different color and directional choices.

A Practical Note on Neumorphism

Neumorphic interfaces have a well-documented accessibility weakness: because the effect relies on very low contrast between the element and its background by design, it can be genuinely difficult to distinguish interactive elements for users with low vision, and doesn't hold up well against accessibility contrast guidelines. It's a striking aesthetic choice, but one to apply carefully and sparingly, with contrast checked deliberately.