littlekit.
Free. No account.

CSS Box Shadow Generator

CSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.

Your inputs stay in your browser. No account required.
Loading tool controls…

How CSS Box Shadow Generator works

CSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.

Try an example

0px 8px 24px 0px produces a downward soft shadow.

Good to know

One outer shadow, with an opaque colour. Negative blur values are invalid.

Your privacy

Processing happens on this device for this tool. We do not upload your input, put it in share links or save it to your favourites. Closing this tab discards the working input; downloaded results remain wherever you save them.

When this tool is useful

Use CSS Box Shadow Generator when you need a quick, local result and want the rule or limitation visible alongside it.

How to use it

  1. Enter the input using the labels shown.
  2. Run the operation and review the result.
  3. Download or copy the result only after checking it.

Checks before you rely on the result

  • One outer shadow, with an opaque colour. Negative blur values are invalid.
  • Keep the original input when the operation creates a new copy.
  • Use the related tools below when the next step needs a different format.

This page is maintained with the tool implementation and its deterministic tests. If the result looks wrong, report the issue with a non-sensitive example.

Read the CSS Box Shadow Generator instructions

A useful next step

Colour Picker
Contrast Checker
HEX ↔ RGB
Made for clarity. Built to be useful.Report an issue