Skip to content
UX Atlas
Plate FND·049 · UI foundationGrid C2 · Rev. 2026-08-14

Shadows

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

UI foundationCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Layered shadows
  3. 3Rules
  4. 4Making shadows look like light
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Defining elevation tokens.
  • Reviewing visual craft on cards and overlays.

Common mistakes

  • Pure black shadows.
  • Inconsistent light direction.
  • Large shadows on scrolling or animating elements.
  • Using pure black at high opacity, which produces a grey halo rather than a shadow.

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.

Making shadows look like light

Do

  • Layer two or three shadows: a tight one for contact, a wider one for ambient spread.
  • Tint the shadow with the surface hue rather than using pure black.
  • Increase blur and offset together as elevation rises.
  • Keep shadows subtle enough that the surface stays the subject.

Do not

  • Use one large soft black shadow for everything.
  • Animate box-shadow on hover for many elements at once, which is expensive to paint.
  • Rely on shadow alone to separate a surface in dark mode.

In practice

  1. i.

    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.

  2. ii.

    One shadow against three

    Why layering reads as real

    A single 0 4px 12px shadow reads as a sticker. The same card with a one-pixel contact shadow, a mid spread and a wide ambient layer reads as an object on a surface, at the cost of two extra values.

Local chart

FND·049 · Region II · Grid C2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

CardCMP·022 · APPLIED THROUGHElevationTERM·067 · SHORT DEFINITIONDark ModeFND·027 · RELATED CONCEPTElevationFND·048 · RELATED CONCEPTFigure and GroundFND·009 · RELATED CONCEPTMotionFND·052 · RELATED CONCEPTNeutralsFND·025 · RELATED CONCEPTPerformance as User ExperienceFND·054 · RELATED CONCEPT

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.

  • CardCMP·022 · Component

Short definition

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

Related concept

Connected closely enough to change how you apply this.