Built-in toolFree · No signup

CSS Box Shadow Builder

Layer multiple box-shadows visually. Control horizontal/vertical offset, blur, spread, colour, and opacity per layer. Toggle inset, enable/disable layers individually, and copy production CSS.

Share on X LinkedIn

Presets

Layers (2)

Shadow type

Horizontal offset (X)0px

Vertical offset (Y)8px

Blur radius24px

Spread radius-4px

Color

Opacity20%

CSS Output

box-shadow: 0px 8px 24px -4px rgba(0,0,0,0.20),             0px 2px 6px -1px rgba(0,0,0,0.12);

Was this tool helpful?

How to use

Pick a preset

Start from Soft lift, Hard drop, Glow, Neon, or Inset well — then customise from there.

Add layers

Click '+ Add' to stack multiple shadows. Enable or disable each layer with the checkbox.

Tune each layer

Select a layer to edit its offsets, blur, spread, colour, and opacity with sliders.

Copy CSS

Hit Copy CSS to get the complete box-shadow declaration, ready to paste into your stylesheet.