Skip to content
UX Atlas
UI foundationCraft conventionIntermediate

Shadows

Simulated light, which reads as physical only when it follows one consistent light source.

Definition

A shadow implies that a surface is raised above the one behind it. Convincing shadows use multiple layers, a consistent light direction, and a colour tinted towards the background rather than pure black.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Layered shadows
  3. Rules
  4. In practice
  5. Continue from here

Layered shadows

css
:root {
  /* Tinted towards the surface hue, never pure black */
  --shadow-1:
    0 1px 2px oklch(0.2 0.02 90 / 0.06),
    0 1px 1px oklch(0.2 0.02 90 / 0.04);

  --shadow-2:
    0 2px 4px oklch(0.2 0.02 90 / 0.06),
    0 4px 8px oklch(0.2 0.02 90 / 0.05);

  --shadow-4:
    0 8px 16px oklch(0.2 0.02 90 / 0.08),
    0 16px 32px oklch(0.2 0.02 90 / 0.08),
    0 1px 0 oklch(1 0 0 / 0.6) inset; /* top highlight */
}

Two or three layers with increasing blur and decreasing opacity read as light falling off, which a single shadow cannot do.

Rules

  • One light source for the whole product, conventionally from above. Shadows offset downward.
  • Larger elevation means larger blur and larger offset, not just darker.
  • Tint the shadow towards the background hue. Pure black shadows look muddy on any coloured surface.
  • Shadow is a decoration, not information. Never use it as the only cue for something functional such as focus.
  • In dark mode, shadows are largely invisible. Use surface lightness for elevation instead.

In practice

Single flat shadow versus layered

Visual craft

One shadow at 20 percent opacity reads as a grey rectangle behind the element. Three layers at 4 to 8 percent read as light. The total darkness is similar; the perceived quality is not.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applied through

Where this shows up as a concrete interface decision.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.