About this tool
Visually craft a CSS box-shadow by dragging sliders for offset, blur, spread, colour and opacity, then copy the ready-to-use rule. Everything updates live and runs entirely in your browser.
Frequently asked questions
What does the spread value do?
Spread grows (positive) or shrinks (negative) the shadow before any blur is applied, making it larger or tighter than the element.
What is an inset shadow?
Inset draws the shadow inside the element instead of outside, which is handy for pressed buttons or inner glows.