Toolstia / CSS box shadow generator
CSS box shadow generator
Move the sliders to shape a shadow and watch the box change. When it looks right, copy the box-shadow line and paste it into your stylesheet. Change the box and page colours to test the shadow on your own design.
How it works
- Adjust the offsets, blur, spread and opacity.
- Pick the shadow, box and page colours.
- Copy the CSS.
The parts of a shadow
The horizontal and vertical offsets move the shadow, the blur softens its edge, and the spread makes it larger or smaller than the box. A negative spread shrinks it, which gives a tight, lifted look.
Soft and natural shadows
Real shadows are soft and faint. Try a small vertical offset, a larger blur and an opacity between 10% and 25%. Heavy black shadows look dated.
Inset shadows
Tick Inset to draw the shadow inside the box, as if the box were pressed in. This works well for input fields and pressed buttons.
The output
The shadow is written with an rgba colour, so the opacity is part of the colour. The same line works in all current browsers.
Questions
Can I add more than one shadow?
Not in this tool. In CSS, separate extra shadows with a comma.
Does it work for text?
No. Text shadows use a different property, text-shadow, with no spread.
Why can I not see the shadow?
The shadow is the same colour as the page, or its opacity is too low. Change the page colour to test.
Is anything uploaded?
No. Your design stays in your browser and is never sent anywhere.