CSS Box Shadow Generator
Build multi-layer box shadows visually and copy the CSS in one click. Start from a preset or add layers manually. Nothing uploaded.
Live preview
CSS output
Save to library
Learn more: building a box shadow layer by layer
What the four numbers on a layer do
Each layer is written out as X offset, Y offset, blur, spread, then the color, with the word inset in front when that box is ticked. The sliders stop at 50px of offset in either direction, 100px of blur, and 30px of spread either way.
Blur and spread are not the same knob. Blur fades the shadow's edge out over that many pixels, while spread resizes the shadow shape itself before any blur happens. The Dramatic preset uses a negative value for it, 0 20px 40px -8px, so the shadow falls 20px below the card while being pulled 8px in on every side.
Set blur to 0 and you get a hard-edged copy of the box instead. That is all the Flat preset is: 4px 4px 0 0 rgba(0,0,0,0.15), an offset silhouette with no fade at any edge.
Why the elevation presets use two layers
The three Elevation presets each stack two shadows rather than one. Elevation 1 is 0 1px 3px rgba(0,0,0,0.12) with 0 1px 2px rgba(0,0,0,0.24) under it: one wider and faint, one tighter and darker right against the edge.
Elevation 2 and 3 keep the wide-plus-tight pairing and scale it up. The wider layer goes to 3px of offset with 6px of blur in Elevation 2, then 6px and 12px in Elevation 3, and it also becomes the darker of the two at 15% against the tighter layer's 12%. Growing both layers together is what makes the card read as sitting further off the page.
Order matters once you start stacking. The browser paints comma-separated shadows front to back, so the first layer in the list sits above the ones below it, and new layers are added at the end of the list.
How the two soft UI presets get their extruded look
Neumorphism and Soft UI both put one shadow down and to the right, then mirror it up and to the left. Neumorphism uses 8px offsets with 16px of blur, black at 15% opacity on one side against white at 85% on the other. Soft UI is the same shape toned down: 6px offsets, 12px blur, black at 10% and white at 70%.
Both presets use plain black and white rather than colors mixed from your own surface color. That shows up on a white page, where the light half has nothing to contrast against and only the dark side of the effect survives. Set the preview background to the gray or pastel you actually plan to ship on before judging either preset.
Inset layers and the saved library
Every layer carries its own Inset checkbox, so a single stack can mix pressed-in and drop shadows. Inner Glow is one inset layer at 0 0 12px 2px rgba(139,92,246,0.4), where the zero offsets keep it even on all four sides and the 2px spread pushes the purple further in from the edge.
Saving a shadow writes it to this browser's local storage, so it stays on the device and never goes anywhere else. Loading a saved shadow replaces whatever layers are in the editor, and clicking a preset does the same, so save the version you are on before you try another.
FAQ
Why does the neumorphism preset look flat on a white background?
Its light layer is white at 85% opacity, and white on white shows nothing, so only the dark side of the effect is visible. Change the preview background to a light gray or pastel and both halves appear.
What is the difference between blur and spread?
Blur controls how far the shadow's edge fades out. Spread grows or shrinks the shadow's shape before the blur is applied, and it can go negative: the Dramatic preset pulls 8px off every side with a spread of -8px.
Does the order of the shadow layers matter?
Yes. The browser paints the first shadow in the list on top of the rest, so a small dark layer listed first stays visible over a large soft one. Any layer you add goes to the end of the list, which puts it behind the existing ones.