Box Shadow Generator

Drag sliders to shape a box-shadow, stack layers for depth, and copy the finished CSS instantly.

Shadow layers
Layer 1
CSS
Adjust the sliders to shape your shadow.

Every shadow is rendered in your browser. Nothing you set here is uploaded to BroBroGo.

FAQ

What do offset, blur, and spread actually control?

Offset moves the shadow left/right and up/down, blur softens its edges, and spread grows or shrinks it before blurring. A negative spread pulls the shadow in, useful for a tight, close shadow.

What does the inset option do?

A normal shadow falls outside the element, like light behind a raised card. Inset flips it inside instead, so the element looks pressed in — handy for sunken inputs or pressed buttons.

Why stack more than one shadow layer?

A single shadow looks flat past a certain size. Real elevation usually combines a tight, dark shadow with a soft, wider one — add a second layer and tune each independently to get that effect.