CSS Box Shadow Generator
Create perfect CSS box shadows visually. Control horizontal and vertical offset, blur, spread, shadow color and opacity, and toggle inset shadows — all with a live card preview and instantly copyable CSS.
Examples
X 0, Y 8, blur 24, spread 0
box-shadow: 0px 8px 24px 0px rgba(91, 108, 255, 0.25);
How it works
A box shadow is written as: horizontal offset, vertical offset, blur, spread, colour. The sliders set each part and the opacity slider turns your colour into an rgba() value.
| Value | Range here | Effect |
|---|---|---|
| X offset | -100 to 100px | Positive moves the shadow right |
| Y offset | -100 to 100px | Positive moves the shadow down |
| Blur | 0 to 200px | Higher is softer; 0 gives a hard edge |
| Spread | -100 to 100px | Positive grows the shadow, negative shrinks it |
| Inset | On or off | Draws the shadow inside the box |
The tool produces one shadow. Layered shadows, several values separated by commas, are not built here; generate each layer and join them by hand.
How to use CSS Box Shadow Generator
Why use this tool
Frequently asked questions
Yes, enable the Inset shadow toggle to render the shadow inside the element.
The chosen hex color is converted to RGBA using the opacity slider value.
Found a bug or have an idea?
ToolOrbit is actively developed — feedback directly shapes what gets built next.
Send feedback