CSS Box-Shadow Generator β craft shadows with live preview
Visually build CSS box-shadow effects with offset, blur, spread, color, and inset controls, then copy the code.
π Runs entirely in your browser. Your input and output are never sent to a server or stored β fully private.
About this tool
Build CSS box-shadow effects visually by setting the horizontal and vertical offset, blur, spread, color and the inset option, with a live preview of the result. When you are happy, copy the generated box-shadow code straight into your stylesheet. It all happens in your browser.
Frequently asked questions
What do the box-shadow values mean?
They are, in order, the horizontal offset, the vertical offset, the blur radius, the spread radius and the color. Adding inset draws the shadow inside the element instead of behind it, which is useful for pressed or recessed looks.
How do I make a soft, subtle shadow?
Use a small offset, a larger blur radius and a color with low opacity. A gentle shadow such as a few pixels down with plenty of blur reads as natural depth, whereas a sharp, dark shadow can look heavy.
Is anything sent to a server?
No. The preview and the generated CSS are created entirely in your browser, so nothing you build is uploaded or stored.