CSS Box Shadow Generator — Live Preview
Design layered CSS box-shadows with sliders and a live preview, then copy the code.
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.3);
About CSS Box Shadow Generator — Live Preview
Design a CSS box-shadow visually instead of guessing numbers. Drag sliders for horizontal and vertical offset, blur radius, spread and opacity, pick a colour, and toggle inset — the preview updates instantly so you can dial in exactly the depth you want. When it looks right, copy the box-shadow declaration.
Real designs often layer several shadows for a softer, more realistic effect. Add multiple shadow layers and the tool combines them into a single comma-separated box-shadow value, the same technique used in modern UI kits for subtle elevation.
The box-shadow property takes offset-x, offset-y, blur, spread and a colour, with an optional inset keyword to draw the shadow inside the element. Everything is computed in your browser and the output is plain CSS you can paste anywhere.
A soft elevation shadow
x:0 y:10 blur:25 spread:-5, black 30%
box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.3);
Add more layers for a richer, multi-depth shadow.
Frequently asked questions
What do offset, blur and spread do?
Offset X/Y move the shadow horizontally and vertically. Blur softens the edge — higher is fuzzier. Spread grows (positive) or shrinks (negative) the shadow before blurring.
How do I make an inner shadow?
Toggle 'Inset' on a layer. The shadow is then drawn inside the element's edges instead of outside, useful for pressed or inset effects.
Can I stack multiple shadows?
Yes. Add layers and they're combined into one comma-separated box-shadow value. Layering a tight dark shadow with a wider soft one gives a natural, realistic depth.
Does box-shadow affect layout?
No. Like outline, box-shadow is painted outside the box model and doesn't affect the size or position of surrounding elements.