Tune shadows visually

Box Shadow Generator

Adjust blur, spread, offset, opacity, and inset behavior on one page so you can copy the exact box-shadow line you need.

Shadow controls

Change values and watch the preview update instantly.

Preview

Use this card to judge shadow depth before exporting it.

Shadow preview

Popular ways to use it

Use it when buttons, cards, modals, pricing blocks, or input panels need more depth but you do not want to guess shadow values.

  • Card elevation
  • Button shadow states
  • Modal depth styling
  • Dashboard panel polish

How to get a good result

  1. 1. Set offset, blur, and spread.
  2. 2. Pick the shadow color and opacity.
  3. 3. Copy the CSS once the preview feels balanced.

Related tools

Gradient GeneratorCSS Button GeneratorRandom Color Generator

Quick questions

Can I make inset shadows?

Yes. Toggle inset to switch between outside and inside shadow styles.

Does it output CSS code?

Yes. You get a copy-ready box-shadow declaration plus a preview card.

Can I control opacity?

Yes. Use the opacity slider to soften or intensify the shadow.