The Armory · Code

Box Shadow Generator

Stack and tune CSS box shadows with live preview, then copy the exact rule. Layer several shadows for depth, glows and neumorphism. Runs entirely in your browser.

Layer 1
Layer 2
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.18), 0px 4px 6px -4px rgba(0,0,0,0.12);

Layered shadows

Real depth comes from stacking shadows: a tight, dark one for contact and a wide, soft one for ambient light. Add a couple of layers and nudge their offsets to build a shadow that feels physical rather than flat.

Nothing leaves your browser. Built by Max Greenaway, marketing, photography and software, Toronto.