CSS Box Shadow Generator

Create beautiful box shadows with live preview. Supports multiple shadows and full customization.

Quick Presets

Shadow Layers (1)

Layer 1

Horizontal: 0px

Vertical: 4px

Blur: 6px

Spread: 0px

Color

Inset

Opacity: 25%

Live Preview

Preview Box

CSS Code

.box-shadow {
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.25);
}

Box Shadow Properties

Horizontal: Positive values move shadow right, negative moves left

Vertical: Positive values move shadow down, negative moves up

Blur: Higher values create more blur

Spread: Positive expands shadow, negative shrinks it

Inset: Makes the shadow appear inside the element