Box Shadow Generator

Stack one or more shadow layers and copy the resulting CSS.

Copied

Last updated

Copied

About this tool

Each layer maps directly to one comma-separated entry in a CSS box-shadow value: horizontal and vertical offset, blur radius, spread radius, a color with its own opacity, and whether it's an inset (inner) shadow. Stack multiple layers — a soft, spread-out shadow underneath a tighter, darker one is a common way to fake more realistic depth than a single shadow can produce.

Nothing you build here is sent to a server; the entire tool runs as JavaScript in your browser tab.