CSS Box Shadow Generator
Design a CSS box-shadow visually and copy the code.
Shadows dialled in by eye
A box-shadow has several values — horizontal and vertical offset, blur, spread and colour — and guessing them numerically is slow. This lets you adjust each visually and see the result live, then copy the CSS, so you can get exactly the depth and softness you want.
Adjust the shadow controls and copy the resulting CSS.
Subtlety is the secret
The difference between a shadow that looks polished and one that looks cheap is almost always subtlety. Real shadows are soft and low-contrast, so a gentle blur with a low-opacity colour reads as natural, where a hard, dark, heavy shadow looks clumsy and dated. The offsets should be small and consistent with a single imagined light source across your design. A very slight shadow is often all it takes to lift an element off the page convincingly. Being able to preview it visually is what lets you keep nudging toward that restrained, believable result rather than overdoing it.
Common questions
What makes a box-shadow look good?
Subtlety — a soft blur with a low-opacity colour and small offsets reads as natural, while a hard, dark, heavy shadow looks cheap.
What do the shadow values control?
Horizontal and vertical offset set the direction, blur sets softness, spread sets size, and colour sets the tint and opacity.
Is anything uploaded?
No. It runs entirely in your browser.