Elevation System
Shadow Forge
Shadow is spatial information. It tells the user what is elevated, what is interactive, and what sits behind what. Most shadows are too heavy because designers treat them as style rather than signal. This tool builds layered shadows that communicate depth without announcing themselves.
Presets
Layers
Background
Shape
Element Color
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06),
0px 4px 6px 0px rgba(0, 0, 0, 0.10),
0px 10px 15px -3px rgba(0, 0, 0, 0.10);0px 1px 2px 0px rgba(0, 0, 0, 0.06)0px 4px 6px 0px rgba(0, 0, 0, 0.10)0px 10px 15px -3px rgba(0, 0, 0, 0.10)A good shadow is invisible. It suggests depth without announcing it. If the user notices your shadow, the shadow has failed.
Why Layers, Not Values
A single box-shadow value
cannot simulate real light. Real shadows have a sharp contact edge and a soft ambient
spread. That requires at least two layers: one tight with low blur for the contact,
one wide with high blur for the atmosphere. Three layers adds a mid-range that
smooths the transition.
The presets above encode this principle. "Subtle Lift" uses two layers. "Material Card" uses three. "Floating" uses four. Each additional layer does not add more shadow — it adds more realism. The total shadow can actually be lighter in opacity than a single heavy layer, yet feel more convincing.
Shadow Communicates Hierarchy
Resting State
Cards, containers, static surfaces. Subtle lift: 1–2px Y offset, low blur, opacity under 10%. The user should not notice the shadow. They should notice the element sits slightly above the page.
Interactive State
Hover, focus, drag. The shadow increases — not dramatically, but enough to signal "this responds to you." A 2–4px increase in Y offset and a slight blur expansion is sufficient. More is theatrical.
Overlay State
Modals, dropdowns, popovers. These float above the page and need shadows that declare it. Larger blur, higher opacity, negative spread to prevent the shadow from being wider than the element. The "Dramatic Depth" preset shows this approach.
Why Most Shadows Are Too Heavy
The default instinct is to make shadows visible. A designer adds a shadow, looks at the screen, and thinks "I can barely see it" — so they increase the opacity to 25%, the blur to 20px, and now every card looks like it is hovering over a pit. The shadow became the design instead of serving it.
The fix is not subtlety for its own sake. It is understanding that shadow opacity compounds across a page. One card with a 20% shadow looks fine. Twelve cards with 20% shadows create a visual weight that competes with the content. An elevation system uses the lightest shadow that still communicates depth — usually 6–12% opacity for resting states.
Background Changes Everything
A shadow that works on white fails on dark gray. A shadow that works on gray fails on a photograph. The tool above lets you swap background colors because shadow design is always relative. Black shadows on a dark background need lower opacity. Colored glows need backgrounds that do not compete.
This is why an elevation system defines shadows by purpose (resting, hover, overlay), not by CSS values. The values change per theme. The purpose stays constant.