CSS Box Shadow Generator
Create and customize CSS box shadows with a live preview. Add multiple shadows and copy the CSS.
Shadow 1
Horizontal4px
Vertical4px
Blur16px
Spread0px
Color
CSS Output
box-shadow: 4px 4px 16px 0px #00000033;
Box Shadow Parameters
Horizontal — positive moves shadow right, negative moves left. Vertical — positive moves shadow down, negative up. Blur — larger values create softer, more diffuse shadows. Spread — positive expands the shadow, negative shrinks it.
Enable inset to create inner shadows. Add multiple shadows by clicking "+ Add Shadow" — they are comma-separated in the CSS output, layered from front to back.