Quick answer: The CSS box-shadow property takes a horizontal offset, vertical offset, blur radius, spread radius and a color, in that order, with an optional inset keyword to shadow the inside of the box instead of the outside. This tool builds the value visually with sliders and a live preview, so you can copy the finished CSS line.
A good shadow gives a flat card or button a sense of depth without needing an image. Getting the CSS right by typing numbers and reloading the page is slow. This tool shows the shadow live as you drag each slider, so you can see exactly what horizontal offset, vertical offset, blur, spread and color produce.
Turn on "inset" to shadow the inside of the box instead of the outside, useful for pressed buttons and recessed input fields.
What each value does
- Horizontal / vertical offset: how far the shadow is pushed sideways and downward. Negative values push it up or left.
- Blur radius: how soft the shadow's edge is. 0 is a hard-edged shape, larger values fade it out.
- Spread: grows or shrinks the shadow shape itself, before blurring. A negative spread makes a tighter shadow than the box.
- Color and opacity: most shadows use black at low opacity (10% to 30%) for a natural look; a colored, more opaque shadow gives a "glow" effect.
Layering multiple shadows
CSS allows more than one shadow on the same element, separated by commas: a tight, dark shadow for definition plus a soft, wide one for depth is a common combination used in modern card designs. Build one shadow here, copy it, then add a second one by hand with a comma between them.
A worked example
Example. A soft card shadow: box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25); — pushed down 10px with a 20px blur at 25% opacity.
Real-world examples
A card component gets a soft, wide shadow at low opacity to lift it visually off the page background without a hard outline.
A pressed or active button state uses an inset shadow instead of an outer one, giving the illusion the button has been pushed in.
Common mistakes to avoid
- Using a fully opaque, pure black shadow. Real shadows are soft and partly transparent; 10% to 30% opacity looks far more natural than 100%.
- Forgetting a parent element with overflow: hidden clips the shadow, so it can look like the shadow is not working when it is actually just cut off.
- Confusing spread with blur. Blur softens the edge; spread grows or shrinks the shadow shape itself before blurring is applied.
Frequently asked questions
How do I add more than one shadow to an element?
CSS box-shadow accepts a comma-separated list. Build one shadow here, copy it, then add a second value by hand after a comma, for example a tight dark shadow plus a soft wide one.
What is the difference between box-shadow and an inset shadow?
A normal box-shadow sits outside the element's edge, giving it a lifted, floating look. Adding "inset" draws the shadow inside the box instead, which looks pressed in or recessed.
Why is my shadow not visible?
A common cause is the parent element having overflow: hidden, which clips the shadow. Another is the shadow color having 0% opacity. Check both if the preview looks right but the shadow disappears on your page.
Does box-shadow work the same in all browsers?
Yes, box-shadow has been supported without a vendor prefix in all current major browsers for a long time.
People also search for this as: box shadow generator, css box shadow generator, css shadow maker, inset shadow generator, drop shadow css generator, box shadow css code.
Sources and further reading
Formulas on this page are checked by automated tests against independent references. See how we test our tools.