Actual widget output
Add depth

Build shadows and copy the box-shadow CSS.

Each example below is the actual published widget running in your browser. Change a layer, pick a preset or add a shadow to see the card and CSS update; nothing is sent anywhere.

This tool needs JavaScript.

Default settings: one soft shadow, seven presets, offset, blur, spread, colour, opacity and inset controls, and Copy CSS.