Box-Shadow Generator
Build a CSS box-shadow from offset, blur, spread, and color, with an inset option, ready to paste — instantly, in your browser.
Runs in your browser
Private & secure
Build a CSS box-shadow from offset, blur, spread, and color, with an inset option, ready to paste into your stylesheet. Enter your shadow values below — the CSS updates instantly, entirely in your browser.
How it works
Generates a standard CSS box-shadow declaration in the order the spec expects: horizontal offset, vertical offset, blur radius, spread, and color, with an optional leading inset keyword for an inner shadow.
FAQs
What does “spread” do that blur doesn’t?
Blur radius softens the shadow’s edge; spread expands or contracts the shadow’s size before blurring is applied — a positive spread makes the shadow bigger than the element, a negative spread makes it smaller.