Smooth Shadow Generator

Design layered, naturalistic box-shadows — stack up to eight shadows with smooth penumbra falloff, dial in the light direction, distance, blur and color, then export clean CSS or Tailwind. Far softer than a single drop shadow.

Preview

5 stacked layers — smoother and more natural than a single drop shadow.

Elevation

Shadow

Distance18px

Blur30px

Direction0°

Spread0px

Intensity14%

Layers5

Color

InsetCarve the shadow inward.

Export

A layered box-shadow — drop it on any element.

.elevation {
  box-shadow:
    0px 0px 0px 0px rgba(15, 23, 42, 0.14),
    0px 1px 2px 0px rgba(15, 23, 42, 0.11),
    0px 5px 8px 0px rgba(15, 23, 42, 0.081),
    0px 10px 17px 0px rgba(15, 23, 42, 0.051),
    0px 18px 30px 0px rgba(15, 23, 42, 0.021);
}