CSS•Client-Side Processing

CSS Box Shadow Generator

Build multi-layer colored shadows with presets, inset controls, undo/redo, and reusable CSS snapshots.

Multi-layer shadow studio

Stack up to eight shadows, mix inset and outer layers, and fine-tune every color.

EnabledInset

Horizontal offset (px)

Vertical offset (px)

Blur (px)

Spread (px)

Shadow color#312e81

Opacity

Shadow studio

Surface#ffffffCanvas#eef2ff

Corner radius (px)

The first shadow is painted on top. Disabled layers stay editable but are excluded from export.

Live output · box-shadow.css

.element {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0px 16px 32px -8px rgba(49, 46, 129, 0.25);
}

Choose a shadow preset or add up to eight editable layers.

Set each layer’s offset, blur, spread, color, opacity, and inset mode.

Reorder or disable layers and compare them on your chosen surface.

Copy, download, or save a named CSS snapshot in this browser.

Yes, toggle the 'Inset' checkbox for inner shadows.

Explore more free client-side developer utilities in this category