Shadow token explorer: design elevation scales with layered box-shadows

An interactive tool for designing layered box-shadow elevation tokens. Pick from six presets, or build custom shadow layers with per-parameter control. Preview across four elevation depths and export ready-to-use tokens.

How shadow layering works

A single box-shadow always looks a bit flat. The trick is stacking multiple layers, each doing a different job. A tight layer with minimal blur and slightly higher opacity anchors the element to the surface, giving it that feeling of physical contact. Behind that, a more diffuse layer with a larger blur radius and lower opacity fills in the ambient depth, the soft environmental light that makes the whole thing feel real. If you want a particularly crisp, tactile edge, a layer with negative spread gets you there.

The presets above all follow this pattern. The only real difference between them is how many layers they use and how aggressively the values ramp up. Three layers with modest doubling gives you a clean, versatile shadow. Four layers with a hard-edge first layer creates something more defined. Play with the layer sliders to get a feel for how each parameter contributes.

The depth scale

The four depth tokens create a consistent elevation hierarchy, each building on the base shadow layers you've configured. Each step up adds progressively larger shadow layers, so the sense of distance from the page surface scales naturally.