CSS Box Shadow Generator

How to Use the CSS Box Shadow Generator

1. Adjust the horizontal offset, vertical offset, blur radius, and spread sliders.
2. Pick a shadow color and opacity, and toggle "inset" for an inner shadow.
3. Watch the live preview box update in real time.
4. Copy the generated `box-shadow` CSS declaration.

Understanding box-shadow values

box-shadow takes, in order: horizontal offset (positive moves the shadow right), vertical offset (positive moves it down), blur radius (higher values create a softer, more spread-out shadow), spread radius (expands or shrinks the shadow shape), and a color. An optional "inset" keyword flips the shadow to appear inside the element's border instead of outside it.

Design tips for realistic shadows

Subtle, low-opacity shadows with a moderate blur radius tend to look more natural than large, dark, sharp-edged shadows. Layering multiple shadows (a tight, dark one plus a soft, wide one) is a common technique for a more realistic sense of depth, similar to how real-world shadows have both a sharp core and a diffuse edge.

Example

Offset 0,4 · Blur 12 · Color rgba(0,0,0,.25)

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

Tips

• Lower opacity (10-30%) shadows generally look more realistic than fully opaque ones.
• Use "inset" for pressed-button or input-field effects rather than raised-element shadows.

Frequently Asked Questions