CSS Tools
CSS Box Shadow Generator
Design box shadows visually. Tweak offsets, blur, spread, and color in real time and copy the ready-to-use CSS with one click. Stack multiple shadows for advanced effects.
box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.30);
How box shadows work
The CSS box-shadow property accepts: horizontal offset, vertical offset, blur radius, spread radius, and color. Positive horizontal values move the shadow right; positive vertical values move it down.
box-shadow: H V blur spread color;box-shadow: inset H V blur spread color;box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.3);Frequently asked questions
What is box-shadow in CSS?
box-shadow adds one or more shadow effects around an element's frame. Each shadow specifies horizontal and vertical offset, blur radius, spread radius, and color.
What does 'inset' do?
Inset shadows appear inside the element instead of outside, creating a pressed or inner-glow effect.
Can I stack multiple shadows?
Yes. CSS allows comma-separated shadow values. Shadows are layered front-to-back, so the first one appears on top.
What is spread radius?
Spread radius expands or shrinks the shadow before blurring. A positive value makes the shadow larger, a negative value makes it smaller than the element.