Box Shadow Generator
A box shadow is five numbers and a color - but which five numbers look "modern" is the hard part. This generator gives you the knobs with a live preview rendering the exact declaration, presets for the three looks that cover most designs, and copy-CSS output that is byte-identical to what you see.
The soft card preset (4px, 6px, 16px blur) is the quiet default behind half the web’s cards; the hard offset preset (0 blur, 2px spread) is the retro print look; the ambient glow is how large surfaces float without visible edges.
How to use
- Set offset X/Y, blur, spread, color and inset; the preview updates live with the exact declaration below it.
- Copy CSS puts box-shadow: ...; on your clipboard; the chips load the three classic looks.
- Keep shadows on containers rather than long list rows - large blurred shadows are a real scroll-paint cost.
Frequently asked questions
What is the difference between blur and spread?
Spread grows or shrinks the shadow shape before blurring - a 2px spread makes a 4px 4px shadow visibly chunkier with the same blur. Blur softens edges outward from that shape. Negative spread shrinks the shadow inside the element’s footprint, a common trick for ground-contact shadows.
What does inset do?
Inset flips the shadow inside the element - light comes from the frame inward - which reads as pressed keys, input wells, or carved panels. The same numbers that look like elevation outside look like depth inside.
Do box shadows affect layout?
No - shadows are painted, not laid out, so they never push siblings around and can overlap freely. That is also why stacking two shadows (one tight and dark, one wide and faint) is the standard "layered elevation" look.
Why is my page slow with many shadows?
Each blurred shadow is a paint cost, and dozens of large blurred shadows on scrolling list rows add up. Shadow the scrolling container once, or drop to zero blur (cheap to paint), or pre-render the shadow into a background image on truly heavy pages.