TooldenTOOLDENDEVELOPERON-DEVICE
Box Shadow Generator
Tune offsets, blur, spread, color and inset for the perfect CSS box-shadow, watch the preview update live, and copy the code.
HOW TO USE
- 1Adjust the horizontal and vertical offsets. Positive values move the shadow right and down, negative values left and up.
- 2Increase blur to soften the shadow edge, and use spread to grow it in every direction. Negative spread shrinks it.
- 3Pick a color with the swatch or type any hex value, then toggle inset to cast the shadow inside the box.
- 4Copy the generated box-shadow declaration with one click. It applies to a single element with no extra CSS needed.
EXAMPLE
INPUT
x: 4px, y: 8px, blur: 12px, spread: 2px, color: #1e293b, inset: false
OUTPUT
box-shadow: 4px 8px 12px 2px #1e293b;
FAQ
What do negative offsets do?
They move the shadow up and to the left. Combined with a negative spread, they are the classic way to fake a raised or pressed element.
What does inset mean?
Inset draws the shadow inside the element, against the edges, commonly used for pressed buttons, input fields or inner depth effects.
Can I use other units or multiple shadows?
The generator emits px values, which match most UI work. Multiple shadows are separate declarations, comma-join several box-shadow values if you need layered effects.
Why does the preview look different from my page?
Shadows render relative to the background around the element. The preview uses a neutral backdrop, so a dark color may look subtler on a dark page.
Is my data sent anywhere?
No. All code is generated entirely in your browser, your settings never leave your device.