onul.works

Box Shadow Generator

Create CSS box-shadow values with a live visual box shadow generator.

⌘ Runs in browser ◴ No data stored ⌁ Free
Generated box-shadow CSS

How to use

  1. 1 Add a shadow layer and adjust the X/Y offset, blur, and spread values.
  2. 2 Change the color and inset option while checking the preview.
  3. 3 Copy the generated box-shadow CSS into your stylesheet.

Common use cases

  • Card box-shadow CSS creation
  • Multiple shadow layer tuning
  • Inset shadow value copying

Frequently asked questions

Which shadow values can I adjust?

You can adjust X/Y offset, blur, spread, color, opacity, and inset, plus add or remove multiple shadow layers.

Can I use the generated box-shadow CSS directly?

Yes. The completed box-shadow CSS appears below the preview, and the copy button copies it to your clipboard.

Does the preview update as I change values?

When you adjust sliders or color values, the preview box and CSS output update immediately.

Related workflow

Box Shadow GeneratorSet the shadow depth for cards, buttons, or panels so the UI hierarchy reads clearly. → Barcode GeneratorIf a label or panel includes an identifier, check its visual weight against the chosen shadow depth. → Color PickerMatch background and accent colors so shadows feel natural on cards and buttons.