Box shadow generator.

Shadows are how an interface communicates depth: what floats above what, what is interactive, what is currently being dragged. Done well they are invisible as an effect and obvious as information. Done badly they look like a 2008 template.

The rule that fixes most amateur shadows is simple physics. Light comes from above, so the vertical offset should be positive and the horizontal offset near zero. The further an element sits from the surface, the larger both the offset and the blur. And the blur should always be several times the offset — a hard shadow at low blur reads as a border, not a shadow.

Opacity is where people overshoot. Anything above about 25% looks heavy on a light background. Subtle stacked shadows at low opacity look far more expensive than one strong shadow, which is why every well-made design system uses several small layers rather than a single dramatic one.

Worth knowing

• Vertical offset positive, horizontal near zero. Light comes from above.
• Blur several times larger than the offset. Low blur reads as a border.
• Keep opacity under 25% on light backgrounds. Subtle beats dramatic almost always.