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.
- What ranges do the sliders cover?
- Horizontal and vertical offset from -50 to 50 px, blur 0 to 100 px, spread -50 to 50 px, and opacity from 0 to 1 in steps of 0.01.
- What does the copy button give me?
- The full declaration, box-shadow: ...;, with the picked hex and the opacity slider combined into one rgba() colour. The inset keyword is included when the toggle is on.