CSS Box Shadow Generator

Summary

Build CSS box-shadow declarations visually: add multiple shadows, tweak offsets, blur, spread, color, and opacity, then copy the ready-to-use CSS with one click.

How it works

1. Each row in the Shadows list represents one shadow layer. The first row is added automatically.
2. Drag the H-Offset and V-Offset sliders to position the shadow behind or beside the box.
3. Increase Blur to soften the shadow edges; increase Spread to make the shadow larger or smaller.
4. Click the color swatch to open the color picker, then adjust the Opacity slider for transparency.
5. Check the Inset box to turn the shadow into an inner shadow.
6. Click "+ Add Shadow" to stack additional shadow layers on top of one another.
7. Watch the preview box update in real time, then click Copy CSS to grab the declaration.

Use cases

• Designing card elevations for UI components without leaving the browser.
• Generating multi-layer neumorphic shadow effects for modern UI designs.
• Creating inset shadows for pressed-button or input-field states.
• Copying ready-to-use box-shadow declarations into CSS or Tailwind arbitrary values.
• Quickly iterating on shadow depth and color for dark-mode components.
• Teaching CSS box-shadow syntax interactively to design students.

Frequently Asked Questions