Match shadows to elevation

Small shadows for raised things, big ones for floating, two layers each.

From refactoring-ui, section 5, Depth & Shadows.

One scale, one level per job

Set each level; wrong ones get a dashed outline.

:root {
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 1px 2px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.06), 0 10px 15px rgba(0,0,0,0.1);
  --shadow-xl: 0 4px 6px rgba(0,0,0,0.05), 0 20px 25px rgba(0,0,0,0.15);
}
.button   { box-shadow: var(--shadow-sm); }
.card     { box-shadow: var(--shadow-md); }
.dropdown { box-shadow: var(--shadow-lg); }
.modal    { box-shadow: var(--shadow-xl); }

Two layers, transparent black

Toggle each layer, then switch Page to Blue.

Opaque grayBad

Payout sent

$4,210.00 · Friday

Transparent blackGood

Payout sent

$4,210.00 · Friday

Flat, scaled, or all floating

Switch modes, then toggle the menu.

Overview

  • Blank invoice
  • From template
  • Duplicate last
Revenue$42.3k
Open18
Runway14 mo
Northwind$4,210
Acme Labs$1,980
Globex$760

Why it matters, pros and cons

Why it matters

The eye reads shadow size as height. One level per job shows what sits, lifts or floats.

Pros

  • Menus separate without heavy borders.
  • Four tokens replace ad-hoc shadows.
  • Transparent black works on any surface.

Cons

  • Shadows nearly vanish on dark backgrounds.
  • Animating box-shadow repaints every frame.
  • Dense, flat UIs often read better with borders.