Color & Design
Box Shadow Generator
Dial in a CSS box shadow with live sliders for offset, blur, spread, colour and opacity, then copy the code.
Good to know
Frequently asked questions
What does inset do?
It draws the shadow inside the element instead of outside, which is useful for pressed buttons and inset fields.
Can I stack multiple shadows?
Yes — copy two values from this tool and separate them with a comma in one box-shadow declaration.
Why use rgba instead of a HEX colour?
rgba lets you set opacity directly, which is what makes a shadow blend with whatever is behind it.
Do shadows affect layout?
No. Box shadows are painted outside the box model and never push other elements around.