CSS Box Shadow Generator
Tune CSS box-shadow values visually, preview the result, and copy a production-ready CSS declaration.
Reviewed May 25, 2026. Privacy model: tool input is processed in your browser and is not uploaded to BytePane servers.
Preview
Presets
box-shadow: 0px 8px 24px -8px rgba(0, 0, 0, 0.18);Answer first: which values should you start with?
For modern UI cards, start with box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18);. Increase offset-y and blur for elevated surfaces, use negative spread to avoid a glow effect, and keep opacity lower on light backgrounds. MDN documents box-shadow as a comma-separated list of shadow effects; the W3C CSS Backgrounds and Borders spec defines how outer and inner shadows are painted.
Sources: MDN box-shadow reference and W3C CSS Backgrounds and Borders Module Level 3. For the longer handoff guide, see CSS Box Shadow Generator: Design and Copy Shadow CSS.
Frequently Asked Questions
What is the CSS box-shadow syntax?
The common form is box-shadow: offset-x offset-y blur-radius spread-radius color. Add inset before the offsets for an inner shadow. Multiple shadows are separated with commas.
What is the difference between blur and spread?
Blur softens the shadow edge. Spread expands or shrinks the shadow shape before blur is applied. Negative spread with a large blur often creates a more realistic card shadow.
When should I use drop-shadow instead?
Use filter: drop-shadow() for transparent PNGs, SVGs, or clipped non-rectangular shapes. Use box-shadow for normal rectangular UI surfaces.