CSS box shadow generator

Drag the sliders to shape your shadow — offset, blur, spread, colour and inset — stack as many layers as you like, then copy the CSS. Everything updates live in your browser.

Preview

Box colour

Page colour

Shadow layers

Generated CSS

Everything runs in your browser. Nothing is uploaded.

How it works

STEP 1

Shape the shadow

Drag the offset, blur and spread sliders, pick a colour and opacity, and flip Inset for an inner shadow. The box updates as you move.

STEP 2

Stack layers

Add more layers to build soft, layered depth — each layer is its own shadow with its own settings, combined into one rule.

STEP 3

Copy the CSS

Copy the ready-to-use box-shadow declaration with one click and paste it into your stylesheet — nothing is uploaded.