CSS Box-Shadow Generator
Dial in offset, blur, spread and colour with live sliders and copy the box-shadow rule.
Build a CSS box-shadow by eye instead of guessing numbers. Move the sliders for horizontal and vertical offset, blur radius and spread, pick a colour and set its opacity, and a preview box shows the shadow in real time while the code box fills with the exact rule to copy. It runs entirely in your browser, so you can iterate as fast as you can drag.
The five parts of a box-shadow
A box-shadow is built from four lengths and a colour, and this tool exposes each one. The horizontal and vertical offsets push the shadow sideways and down; the blur softens its edge; and the spread grows or shrinks it before the blur is applied. The result reads in the familiar order — offset-x offset-y blur spread colour — so what you copy matches how you'd write it by hand.
How colour and opacity combine
You choose the shadow colour with a colour picker and its strength with an opacity slider from 0 to 100%. Behind the scenes the tool converts your hex colour into an rgba() value and divides the opacity by 100 for the alpha channel — so a black shadow at 25% becomes rgba(0, 0, 0, 0.25). That's why the generated code uses rgba() rather than a hex colour: it's the cleanest way to carry transparency into a single shadow value.
Frequently Asked Questions
Why is the shadow colour written as rgba() and not hex?
Because the tool folds your opacity slider into the colour. It converts the hex you pick into rgba() and sets the alpha to opacity ÷ 100, so a single value carries both the colour and its transparency.
What is the difference between blur and spread?
Blur softens the shadow's edge — a higher blur makes it fuzzier. Spread changes the shadow's size before blurring: a positive spread makes it larger than the box, a negative one pulls it in.
Does it generate an inset (inner) shadow?
No. This tool builds a standard outer drop shadow. To make it inset, add the keyword "inset" to the start of the copied box-shadow value in your own CSS.
Can I copy the result straight into my stylesheet?
Yes. The code box gives a complete "box-shadow: …;" declaration. Paste it onto any element's rule and it will render the same shadow you previewed.