CSS Box Shadow Generator

Design multi-directional elevation, soft ambient drop shadows, and inset depths with live CSS export.

Customize Parameters

Horizontal Offset (X): 0px

Vertical Offset (Y): 20px

Blur Radius: 25px

Spread Radius: -5px

Shadow Color

Opacity: 30%

Inset Inner Shadow

Floating Element

box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.3);

Design Tips

✓Negative spread (e.g. -5px) creates crisp, realistic diffused shadows without muddy edges.

✓Use low opacity (0.1 to 0.3) for modern subtle floating card elevations.

✓Enable Inset to create pressed, sunken, or inner cavity effects.