Box Shadow Generator

Stack as many shadow layers as you like, drag the offset, blur and spread sliders, and watch the preview update in real time. The CSS is generated as you go — copy it straight into your stylesheet.

Presets
Live preview radius 16px
Preview

Pick a preset or drag the sliders — the box repaints instantly

px
2 layers · editing #1
px
px
px
px
%
2 lines · 96 B
Output

box-shadow ready  ·  2 layers  ·  rgba() output

2
Layers
3px
Max blur
1px
Elevation · Y
96B
CSS size

How the box-shadow value is built

Part Range in this tool What it does

How to use this tool

  1. 1

    Start from a preset — or go straight to the sliders. Every change repaints the preview and rewrites the CSS instantly, no button to press.

  2. 2

    Press Add layer to stack a second, third or fourth shadow. Click a row in the layer list to edit it, click its colour square to pick a colour or type a hex right in the row; the first layer is painted on top, exactly like in CSS. Turn on Inset to draw the shadow inside the box instead.

  3. 3

    Choose your output flavour — one layer per line, rgba() or 8-digit hex, an extra -webkit- line — then Copy CSS or Download .css. Undo and Redo (or Ctrl+Z) step through every change you made.

Related Dev Tools

Copied to clipboard