Box Shadow Generator

Free

Design smooth multi-layer CSS box-shadows with a live preview and copy them as CSS or Tailwind.

Controls

Layers5Distance24Blur48Spread0Light angle90Opacity0.18Easing1.8

ColorinsetDark background

Preview

5 layers

CSS

box-shadow:
  0px 1.32px 2.65px 0px rgba(15, 23, 42, 0.08),
  0px 4.61px 9.22px 0px rgba(15, 23, 42, 0.08),
  0px 9.57px 19.14px 0px rgba(15, 23, 42, 0.07),
  0px 16.06px 32.12px 0px rgba(15, 23, 42, 0.06),
  0px 24px 48px 0px rgba(15, 23, 42, 0.05);

Tailwind

shadow-[0px_1.32px_2.65px_0px_rgba(15,23,42,0.08),0px_4.61px_9.22px_0px_rgba(15,23,42,0.08),0px_9.57px_19.14px_0px_rgba(15,23,42,0.07),0px_16.06px_32.12px_0px_rgba(15,23,42,0.06),0px_24px_48px_0px_rgba(15,23,42,0.05)]

Processed locally in your browser — nothing leaves your device.