CSS Box Shadow Builder | Reza Heidari

Layer realistic drop shadows or inset glows without memorizing CSS syntax. Adjust offsets, blur, spread, color opacity, and stacking order while the preview and code stay in sync.

Shadow Stack

Add, duplicate, or reorder layers. The selected layer drives the controls on the right.

Use the stack to layer drop shadows or inset highlights.

Layer Controls

Layer 1 selected

Horizontal offset 0px

Vertical offset 0px

Blur radius 0px

Spread radius 0px

Opacity 100%

Shadow color

Accepts #RGB or #RRGGBB values.

Inset shadow

Live Preview

Stage background

Box fill

Border radius 24px

CSS Output

Copy the generated box-shadow declaration into your design system.

Includes every layer in stack order. Adjust values above to refine the look.