๐ŸŸฆBox Shadow Generator

Design CSS box-shadow visually

About the Box Shadow Generator

Box Shadow Generator builds CSS box-shadow values visually โ€” offset, blur, spread, color, opacity and inset โ€” with a live preview.

It removes the guesswork from shadows and gives you copy-paste CSS. Runs entirely in your browser.

Common use cases

  • Adding depth to cards, buttons and modals
  • Creating subtle or dramatic shadows
  • Designing inset shadows for inputs
  • Matching a shadow from a design

How to use the Box Shadow Generator

  1. Adjust the offset, blur, spread, color and opacity.
  2. Toggle inset if needed.
  3. Copy the generated CSS.

Frequently asked questions

What is spread?

Spread grows or shrinks the shadow before the blur is applied โ€” positive values make it larger.

Can I create inner shadows?

Yes, enable the inset option for shadows inside the element.

Is it free?

Yes, the generator is free and runs locally.