CSS Box Shadow Generator

Build beautiful box shadows visually with multiple layers, then copy the CSS.

Shadow renders outside the element
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

Frequently Asked Questions

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets, blur and spread radii, color, and an optional inset keyword.
Yes! CSS allows comma-separated shadow values. This generator lets you add multiple shadow layers and reorder them. The first shadow in the list renders on top.
Spread radius expands or contracts the shadow. Positive values make the shadow larger than the element, while negative values shrink it. A spread of 0 keeps the shadow the same size as the element.
By default shadows render outside the element (outset). Adding the inset keyword makes the shadow appear inside the element, giving an embossed or pressed-in look.