Box Shadow Generator
Compose layered CSS box-shadows with live light and dark preview and a smooth-shadow wizard — entirely on this device.
- Layer 1
box-shadow:
0 4px 12px rgba(0,0,0,0.15)41 B · 2 lines
Press ? for shortcuts
Do it offline:$ printf 'box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n' >> component.css
How to use it
- Edit each layer's X and Y offset, blur, spread, color and inset toggle; preview and CSS track every keystroke.
- Load subtle, medium, harsh or neumorphic presets, or run the wizard: distance, intensity and layer count become eased layers.
- Paste an existing box-shadow value into the import pane; any error names the failing layer.
- Flip the preview background — a shadow tuned on white can vanish on near-black.
- Copy the single-line CSS, download a .css file, or share the layer stack as a link.
Stack box-shadow layers with per-layer offset, blur, spread, color and inset controls, and check it on light, dark or custom backgrounds. A smooth-shadow wizard eases one distance into several soft layers; pasting an existing value turns it into editable rows. The declaration comes out canonical — multi-line for reading, single-line for copy — and everything runs on this device.
How it works
One heavy blur has a single softness at every distance — fog. The wizard stacks thin layers along a cubic curve instead: layer i of N takes t = i/N, eases it as t³, and scales Y offset and blur toward your distance while alpha decays from your intensity. At distance 24px, intensity 0.2, five layers: 0.19px at alpha 0.199 out to 24px at alpha 0.05.
The css-backgrounds-3 grammar per layer is inset? x y blur? spread? color? — two to four lengths sitting together, inset and color on either side. Output is canonical: zeros print a bare 0, a zero spread is dropped, blur too when both are zero, inset first, color last. A pasted inset 0 1px 0 #fff prints back as inset 0 1px #fff — identical shadow, one token shorter.
Examples
Single layer — x 0, y 4px, blur 12px, spread 0, rgba(0,0,0,0.15)box-shadow: 0 4px 12px rgba(0,0,0,0.15)The medium preset and the page's default state: a soft card shadow whose zeros print as bare 0, spread omitted.
Smooth wizard — distance 24px, intensity 0.2, 5 layers, base #000box-shadow: 0 0.19px 0.19px rgba(0,0,0,0.199), 0 1.54px 1.54px rgba(0,0,0,0.19), 0 5.18px 5.18px rgba(0,0,0,0.168), 0 12.29px 12.29px rgba(0,0,0,0.123), 0 24px 24px rgba(0,0,0,0.05)One distance becomes five eased layers, offset and blur climbing 0.19px to 24px while alpha falls 0.199 to 0.05. Apply replaces the stack in one undoable step.
inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.3)box-shadow: inset 0 1px #fff, 0 1px 3px rgba(0,0,0,0.3)A pasted pair becomes two labeled rows: inset top highlight over drop shadow. Nothing is lost; the canonical print drops the redundant 0 blur and gives .3 its leading zero.
0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0)box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0)Valid CSS whose second layer paints nothing — the tool chips “layer 2 is invisible — its color's alpha is 0.” so no dead layer ships silently.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
20 or more layers: legal, but paint costs
Stacks stay functional to the 100-layer cap; from 20 a chip warns that paint cost grows with every layer. Guidance, not a refusal.
Zero blur is a hard-edged shadow
2px 2px #000 needs no blur token and prints back unchanged as box-shadow: 2px 2px #000 — a sharp offset copy of the box.
Negative spread pulls the shadow inward
0 1px 2px -1px rgba(16,24,40,0.06) keeps the shadow tighter than the box — the usual trick for sunken borders. Blur is the one length that can't go negative.
Dark backgrounds change what a shadow shows
Black at 15% alpha reads on white yet nearly disappears on near-black — hence the light, dark and custom previews. Check both before shipping a token.
Token order is forgiving; output is canonical
red 4px 4px parses, as does INSET in any case — both may sit before or after the lengths. The print ends box-shadow: 4px 4px red, color last.
Changing a unit never converts the number
Switch 12px to rem and it becomes 12rem — digits stay, meaning changes, preview reacts. Root-size math belongs in a converter, not a silent rewrite.
Common errors
layer 3: `10px 10px red blue` has two colors- One color token per layer. The diagnostic names and quotes the failing layer; Jump to error selects it — split or delete the extra color.
layer 1: `#3b82g6` is not a valid color — expected hex (3/4/6/8 digits), rgb(), hsl(), oklch(), or a CSS color name.- g is not a hex digit. The validator lists exactly what it accepts; the same rule runs in every color field and the import pane.
layer 1: `10em` is not a supported length — this tool takes px and rem values (bare 0 allowed).- Lengths are px or rem only — em, vh, calc() and var() have no fixed pixel meaning here, so they are refused, not guessed at.
layer 1: found 1 length value — a shadow takes 2 to 4 (x-offset, y-offset, optional blur, optional spread).- X and Y offsets are mandatory; blur and spread are optional but positional. 4px #000 lacks its Y offset — the count is what the parser saw.
Input is larger than the 16 KB (16,384 characters) import limit for this tool.- The importer refuses past exactly 16,384 characters rather than freeze the tab; a paste at the limit still parses. The banner adds this page's CLI line.
FAQ
How do I make a box-shadow look natural?
Layer it. Real shadows are darkest near the object and fainter further out, so several layers with growing blur and falling alpha beat one heavy blur. The wizard builds that shape; start there, then tune single rows.
What does the smooth-shadow wizard actually generate?
Ordinary box-shadow layers: it cubes i/N per layer, scales Y offset and blur toward your distance, and decays alpha from your intensity. Every number stays visible and editable.
When should a shadow be inset rather than drop?
A drop shadow paints outside the border box; inset flips it inside — pressed states, wells, hairline top highlights like inset 0 1px #fff. Light inset highlights also survive dark themes better than translucent black.
Keyboard shortcuts
- ⌘/Ctrl + C
- Copy the single-line declaration when nothing is selected; typing fields are left alone.
- ⌘/Ctrl + Shift + C
- Copy the declaration regardless of any selection.
- ⌘/Ctrl + S
- Save the declaration as a .css download, not the browser's save-page dialog.
- ⌘/Ctrl + Arrow Up / Down
- Move the focused layer row up or down; end positions announce a no-op.
- t
- Switch the color theme; suppressed while a field has focus.
- ? or ⌘/Ctrl + /
- Open the keyboard reference overlay.
- Esc
- Dismiss the topmost dialog; the layer stack is untouched.