CSS Box Shadow Generator

The CSS Box Shadow Generator lets you adjust offset, blur, spread, and colour, layer several shadows together, and copy the resulting CSS, all previewed live. It is for developers crafting depth and elevation effects.

Box-shadow values are unintuitive to guess, and layered shadows compound the difficulty. Adjusting them against a live preview makes the effect predictable, and the CSS is ready to paste.

1. Set the horizontal and vertical offset, blur, and spread.
2. Choose the shadow colour and opacity.
3. Add more layers to build a richer shadow if you want.
4. Watch the preview update with each change.
5. Copy the generated box-shadow CSS.

• Offset, blur, spread, and colour controls
• Multiple layered shadows
• Live shadow preview
• Copy-ready box-shadow CSS

• Adding subtle elevation to cards and panels
• Building a layered shadow for a realistic effect
• Matching a shadow to a design specification
• Creating inset shadows for pressed states

• Favour soft, low-opacity shadows for a natural sense of elevation.
• Keep shadow direction consistent across a design, as if lit from one source.
• Use layered shadows sparingly, since each one adds rendering cost.

• Using heavy, dark shadows that look harsh; soft, low-opacity shadows usually read better.
• Stacking so many layers that rendering becomes costly for little visual gain.
• Forgetting that a large spread can make a shadow look like a solid border.