Box Shadow Generator
Build depth one layer at a time. Move the light, tune softness and color, and copy a production-ready shadow.
Live preview
Drag the light or use arrow keys to move the selected shadow.
Shadow layers
Up to 8 layers. The first enabled layer sits on top.
box-shadow: 0px 12px 32px -8px #0f172a33;
Everything stays in your browser.
Related tools
Format references
Tool page updated: