Single shadows can't carry it

Designers have all done this: open a card component, hit Enter on box-shadow:, accept whatever the framework's default is, ship it. The shadow does its job — there is now a shadow — but it reads as nothing in particular. Computer-generated. The card looks placed by a machine, not lifted toward the light.

Stacked shadows fix that. Two to six layers, each handling a different aspect of how light moves around an object, composed into a single declaration that reads as real. Not realistic — workbench isn't trying to fake photographic light — but real enough to stop reading as I just used the default.

The math problem with one shadow

A single box-shadow describes one offset, one blur, one spread, one color. That can describe a simple shadow. It cannot describe how light actually moves around an elevated surface.

Look at any actual card on any actual surface. There is a faint contact line where the card meets the table — the bit that says this is touching the surface. There is a short, soft shadow falling almost directly under the card — the card's own bulk, casting against gravity-pulled diffuse light. There is a longer, fainter shadow extending outward — the same light, scattered.

Each of those is a different relationship between the card and its environment. A single box-shadow collapses them into one approximation. The approximation is fine for placeholder UI; it falls apart the moment a designer's eye lands on the result.

Material design's elevation system attempted this — z-depth tokens with predictable shadow values. It worked because the values were hand-tuned, not because the concept of z-depth replaced layered light. Workbench takes the same observation forward: shadows that read as real come from a designer looking at real light, then exposed as starting points the next designer can adjust.

Ambient, mid, far

A useful shadow stack usually has three roles.

Ambient is the contact layer. Short offset, modest blur, light alpha. The visual handshake between card and page. Without ambient, a card with shadows looks like it's hovering in space; with it, the card has weight.

Mid is the body shadow. Medium offset, wider blur, slightly more opacity. What most single-shadow declarations approximate, badly. The mid layer is where most of the elevation cue lives.

Far is the atmospheric layer. Long offset, wide blur, low opacity, often with negative spread. What makes a card read as in space rather than stuck to the page.

The UI calls them Layer 1, Layer 2, Layer 3 because a preset may have more than three layers. Think of ambient, mid, and far as jobs the layers play, not labels in the UI.

The Comeau reference

Josh W. Comeau's Designing Beautiful Shadows in CSS is the clearest writing on stacked shadows. It explains why single shadows feel flat, how multiple layers create depth, and how to tune them by hand. It is worth reading.

Workbench is downstream of that work, but the values here are not copied. They are tuned for this interface, this surface palette, and this preview system. The curve algorithm — lookup-table anchors with cubic-bezier eases between them, four channels easing independently — is a different implementation choice. Linear interpolation between anchors looked computed in early sketches; the cubic eases brought back the feel of this transition was designed.

If the Comeau article is the textbook, workbench is the kitchen. The article teaches the principles; the tool ships defaults that already encode them, plus an editor for tuning when the defaults aren't right.

When to use which preset

The five presets answer different questions about what the card is supposed to feel like.

Subtle is for cards in lists. Search results, table rows, comment threads. The card needs to feel like a discrete object, but it shouldn't compete with siblings. Two layers, lowest alphas in the library.

Soft is the default — the workbench shadow tool opens here. Standard cards, panels, sections, regular UI work. Three layers, the canonical ambient/mid/far. If you don't have a strong opinion about elevation, Soft is usually right.

Medium is for clearly-elevated UI. Modals, sheets, prominent cards. Four layers, more pronounced mid and far. When a card is meant to draw attention quietly, Medium reads as I have something to show you without yelling.

Strong is for UI that floats. Dropdowns, popovers, tooltips that hover above their parent. Five layers, longer atmospheric reach. The card visibly separates from the underlying surface; it doesn't blend.

Dramatic is for editorial lift. Featured assets, magazine-style covers, the one card on a page meant to feel like a focal point. Six layers, the longest blurs, the highest alphas. Used everywhere it'd be exhausting; used once per page it works.

Most products need Subtle and Soft. The other three are situational. The slider lets you ease between presets — pick Soft, slide one notch toward Medium when default needs a touch more weight, save the result.

Composing into a system

For design systems, use the Variables output. Each layer becomes a CSS custom property, and the composed stack becomes the token consumers reference.

:root {
  --shadow-1: 0 1px 2px 0 oklch(0% 0 0 / 0.08);
  --shadow-2: 0 4px 8px -1px oklch(0% 0 0 / 0.10);
  --shadow-3: 0 12px 24px -4px oklch(0% 0 0 / 0.12);
  --shadow-stack: var(--shadow-1), var(--shadow-2), var(--shadow-3);
}

.card {
  box-shadow: var(--shadow-stack);
}

Most products only need a few named elevations: card, raised, floating, maybe hero. Three to five is usually enough.

The trap is saving every interesting slider position. A tight library reads as a system. Fourteen shadows read as decoration.

Name shadows by use, not intensity. Card is a useful name. Shadow 4 is not.

Related tools

Palette — test how shadows read against palette-driven card colors.
Gradient — pair tonal backgrounds with the right amount of lift.
Contrast — check text on the actual card colors you plan to use.
Type Scale — use shadowed cards as real preview surfaces for headings and body text.

Workbench tools share a bench. The shadow you tune here can sit alongside palettes, gradients, and type scales.