Box Shadow Studio
Design CSS box shadows visually and copy the code, including layered shadows.
Shadows that look right
A CSS box shadow has several values — horizontal and vertical offset, blur, spread, colour — and guessing them numerically is slow. This lets you adjust each visually and see the shadow update live, then copy the CSS, so you can dial in exactly the depth and softness you want rather than tweaking numbers and refreshing.
Adjust the shadow controls and copy the resulting CSS.
Subtlety and layering
Two things separate a good shadow from an obvious one. First, subtlety: real shadows are soft and low-contrast, so a gentle blur with a low-opacity colour looks natural where a hard, dark shadow looks cheap. Second, layering — stacking two or three shadows with different blurs and offsets mimics how real light falls and produces a far more convincing sense of depth than a single shadow can. Being able to build and preview layered shadows visually is what makes that achievable without endless trial and error.
Frequently asked questions
What values make up a box shadow?
Horizontal and vertical offset, blur, spread and colour — plus you can layer several shadows together.
How do I make a shadow look realistic?
Keep it subtle — soft blur, low-opacity colour — and layer two or three shadows to mimic how real light falls.
Is anything uploaded?
No. It runs entirely in your browser.