Box Shadow Generator
Design perfect shadows with depth and realism
Craft shadows you can see before you code them
A convincing shadow is rarely a single line. Soft interface cards usually stack two or three shadows with different offsets and opacities. This generator lets you build each layer with sliders, judge the effect on a live preview box, and then copy the finished box-shadow declaration in a single step.
Building a shadow
- Look at Shadow Layers. You start with one layer. Adjust its H-Offset and V-Offset sliders from minus 50 to 50 pixels, and the Blur from 0 to 100 pixels.
- Pick a shadow Color, set its Opacity from 0 to 1, and tick Inset if you want an inner shadow.
- Press Add Layer to stack more shadows. Each layer is numbered, and a trash icon appears so you can delete any layer while at least one remains.
- Set the Preview Background and Box Color to resemble your real design.
- Or begin with a preset: Soft Depth, Hard Edge, Neumorphic or Deep Inset.
- Click Generate Shadow CSS, check the 150 pixel preview, and use Copy CSS.
What the result looks like
The colour and opacity you choose are merged into an rgba value. Each layer becomes one entry in the list, written as optional inset, horizontal offset, vertical offset, blur, a spread value and the colour, and multiple layers are separated by commas on new lines. Layers are painted in the order listed, with the first one on top.
When it saves time
- Making soft, realistic card and modal shadows for a web app.
- Building the paired light and dark shadows for a neumorphic button.
- Adding an inset shadow to an input field or pressed state.
- Matching a shadow from a design mock-up by adjusting numbers until the preview looks right.
Limits and tips
The spread radius is not adjustable; the tool always writes it as 0 pixels. If you need a larger or shrunken shadow, edit that number in the copied CSS. Moving any slider hides the earlier output, so click Generate again after tweaking. The preview panel colours help you judge contrast, but they are not part of the code you copy.
Keep opacity low for realistic depth. Dark, sharp shadows look heavy on light backgrounds, and light shadows are invisible on white. Stacking a tight, subtle layer with a wide, faint layer usually looks more natural than one large blur. Everything is calculated in the browser as you interact.
Related Tools