A tool to design elevation scales and crispy layered box-shadows

Most shadow systems I've worked with fall into one of two camps: a single box-shadow that looks flat, or a hand-tweaked pile of layers that nobody can explain six months later. This tool sits in between. You get opinionated presets that actually look good, with full layer-level control when you need to fine-tune.

Why layers matter

A single shadow layer never quite looks right because real-world light doesn't work that way. Objects cast both a tight contact shadow where they meet the surface and a softer ambient shadow from diffuse light. Stacking two or three layers, each with different blur and opacity values, gets you much closer to something that feels physical.

The presets all follow this principle. A tight layer with minimal blur anchors the element to the page. Behind it, a more diffuse layer with lower opacity provides the ambient depth. Some presets add a third layer with negative spread for a crisper edge. The only real difference between them is how many layers they use and how aggressively the values ramp up.

The depth scale

Four depth tokens give you a consistent elevation hierarchy. Each step up adds progressively larger shadow layers, so the sense of distance from the surface scales naturally.

The idea is that you configure your base shadow layers once, and the depth scale does the rest. depth0 keeps things subtle for small interactive elements. depth3 lifts modals and dialogs well clear of the page. Everything in between just works.