ToolBirch

CSS Box-Shadow Generator

Design a box-shadow with sliders and copy the exact CSS.Design & Color

CSS Shadow Generator

Design a box-shadow visually and copy the CSS. The preview box uses the shadow live.

CSS
box-shadow: 0px 8px 24px -4px rgba(21, 24, 36, 0.20);

About this tool

Getting a shadow to feel right means nudging four numbers at once. Move the sliders, watch the preview update instantly, then copy the declaration — the colour is written as rgba with your chosen opacity baked in.

How to use the CSS Shadow Generator tool

  1. Adjust the sliders. Offset X and Y, blur, spread and opacity all update the live preview.
  2. Pick a colour. Any HEX colour; the alpha channel comes from the opacity slider.
  3. Copy the CSS. A complete box-shadow declaration, ready to paste.

Supported formats

Input

  • Slider values for the shadow parameters
  • A HEX colour

Output

  • A box-shadow CSS declaration

Inputs are validated before anything is processed. Invalid values and unsupported files are rejected with a clear error instead of failing silently.

Frequently asked questions

Can I stack multiple shadows?

Not in this release; the tool produces a single shadow.

What does spread do?

It grows (positive) or shrinks (negative) the shadow uniformly before the blur is applied. Slight negative values soften card edges.

Why rgba instead of a hex alpha?

rgba is the most readable form of a shadow colour and needs no browser-specific syntax.

Is inset supported?

Yes, via the inset checkbox.

Privacy

Everything you enter stays in this browser tab. There is no upload endpoint for tool inputs, no account, and no server-side copy of your text or files. Results are produced locally and disappear when you close the page.

No account is required and no file is ever uploaded. See the privacy policy for details about analytics and the limited data this site stores.

Known limitations

  • One shadow per output; layered shadow stacks are not composed.
  • The preview box is fixed in size and border radius.
  • Colour is HEX input, rendered as rgba in the output.

Related tools

Other free tools from the same collection.

Gradient GeneratorCompose a two-stop CSS linear or radial gradient visually.Color Palette GeneratorBuild a five-colour palette from one base colour using harmony rules.Color ConverterConvert colours between HEX, RGB and HSL with a live preview.Contrast CheckerCheck a colour pair against WCAG AA and AAA contrast thresholds.