CSS Box Shadow Generator

Click "Add layer" to stack another shadow. CSS renders box-shadow layers in the order listed, with the first layer on top and later layers underneath — this generator lists them in that same paint order.

Spread grows (positive) or shrinks (negative) the shadow's shape before blur is applied, independent of the offset. A negative spread combined with a larger blur is how soft, contained shadows (like Material elevation) are built.

Adding the inset keyword renders the shadow inside the element's border box instead of outside it, producing a recessed or "pressed-in" look — commonly used for input fields or active/pressed button states.

No. All shadow math and CSS generation runs locally in your browser with plain JavaScript — nothing is uploaded.