Presets:
Layer 1
Horizontal (px)0
Vertical (px)4
Blur (px)20
Spread (px)0
Color
Opacity0.12
CSS Output
What This Tool Does
Design CSS box shadows visually with a live preview that updates as you adjust the controls. Add multiple shadow layers for complex effects. Five built-in presets demonstrate common shadow styles. Copy the generated CSS directly to your stylesheet.
Frequently Asked Questions
What do the shadow controls do?
Horizontal offset moves the shadow left (negative) or right (positive). Vertical offset moves it up (negative) or down (positive). Blur radius controls how soft the shadow edges are — 0 is sharp. Spread radius makes the shadow larger (positive) or smaller (negative) than the element. Inset flips the shadow to the inside of the element.
Can I stack multiple shadows?
Yes — click Add Layer to add additional shadow layers. CSS box-shadow accepts a comma-separated list, and each layer is rendered on top of the previous ones. This is how complex, realistic shadows are built.
How do I make a soft, diffuse shadow?
Set horizontal and vertical offsets to 0, a large blur radius (20-40px), a moderate spread (0-5px), and low opacity (15-25%). This produces the popular "floating card" shadow used in modern UI design.