CSS Box Shadow Generator
Create beautiful box shadows with live preview and copy-ready CSS. Layer multiple shadows with full control. Free, no signup.
Preparing private browser tool…
Frequently asked questions
- What does each box-shadow value mean?
- h-offset (horizontal), v-offset (vertical), blur radius, spread radius, color. Add the inset keyword for an inner shadow instead of an outer one.
- Can I stack multiple shadows?
- Yes - separate them with commas: box-shadow: 0 2px 4px #000, 0 8px 16px rgba(0,0,0,0.2). Stacking is the secret behind realistic elevation systems like Material Design.
- Why does the shadow look pixelated?
- Increase the blur radius. Without blur, the shadow is a hard duplicate of the box. Use blur 10-30px for soft modern shadows.
- Negative spread - what does it do?
- Shrinks the shadow inward, creating a tighter glow under the element. Useful for floating cards where you want the shadow narrower than the element.