Box Shadow Generator
Design a CSS box-shadow with a live preview, stack up to five layers, then copy the code.
How it works
A CSS box-shadow is built from five parts: a horizontal offset, a vertical
offset, a blur radius, an optional spread radius and a colour. Positive offsets push the
shadow right and down, the blur softens its edge, and the spread grows (or, when negative,
shrinks) the shadow before it is blurred. Tick inset and the same shadow is drawn
inside the box instead of behind it. Every control here updates the preview and the code
the moment you change it, so you can dial in a shadow by eye rather than by guesswork.
Real-world shadows are rarely a single blur. Stack up to five layers — a tight, dark one for
contact and a wide, faint one for ambient light — and the generator joins them into one
comma-separated box-shadow value in the correct order. Spread and offsets of
0 are written as a bare 0 and zero spread is omitted, so the output
is the same tidy CSS you would hand-write. Copy just the declaration, copy a complete
.shadow { … } rule, or download it as a .css file. Everything runs
in your browser with plain JavaScript — nothing is uploaded and there is no sign-up.
Frequently asked questions
How do I make a box shadow in CSS?
Write box-shadow followed by a horizontal offset, a vertical offset, a blur radius, an optional spread radius and a colour — for example box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25). Set the sliders here and the exact declaration is generated for you.
What is the spread radius in box-shadow?
Spread grows or shrinks the shadow before it is blurred. A positive spread makes the shadow larger than the box on every side; a negative spread pulls it in, which is the trick behind soft, tightly tucked elevation shadows. Zero spread is omitted from the output because it is the default.
How do I add multiple box shadows in CSS?
Separate each shadow with a comma in a single box-shadow declaration; the first one is painted in front. Add up to five layers here and the generator joins them in the right order, so you can combine a tight contact shadow with a wide ambient one.