Box shadow generator

Tune offsets, blur, spread, color, and inset, then copy the CSS.

Preview
CSS
box-shadow: 8px 12px 24px 0px rgba(31, 41, 51, 0.35);

Generated in this browser. Nothing is sent anywhere.

One shadow layer. Multiple stacked shadows and `filter: drop-shadow` need hand-written CSS.

How to use

  1. Move the sliders to shape the shadow.
  2. Watch the preview card.
  3. Copy the CSS line.

What it supports

A single shadow layer as `box-shadow` CSS. Stacked shadows and drop-shadow filters need hand-written CSS.

Related tools

Related guides