About CSS Shadow Generator

CSS Shadow Generator builds a layered box-shadow or text-shadow with a live preview. Adjust the offset, blur, spread, colour, and inset for each layer, stack as many as you like, and copy the declaration.

It runs in the page and remembers your last shadow. Nothing is uploaded.

How to use it

  1. Choose box-shadow or text-shadow.
  2. Adjust each layer's controls, and add more layers for depth.
  3. Copy the CSS, or paste an existing box-shadow into the import field to edit it.

Common questions

Why are spread and inset hidden for text-shadow?

text-shadow does not support them, so those controls only appear in box-shadow mode.

Can it import any shadow?

It reads box-shadow values with unitless or px lengths. Other units are treated as 0.

In what unit are lengths written?

Pixels.

Is anything uploaded?

No. It is all local to your browser.