Create a CSS shadow

Add shadow layers, adjust each one with sliders and see the result on a light and a dark surface. The first layer in the list is drawn on top, as in CSS.

Runs on your device

Loading tool…

How to use

Adjust a shadow layer; add more layers for depth.
Preview on light or dark backgrounds.
Copy the CSS.

Worked example

Two layers: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.08).

Supported formats and limits

Output	CSS
Engine	Live CSS preview

Limitations

Very large blur radii can slow down scrolling on low-end devices.

Questions

Can I edit a shadow I already have?

Yes. Paste a box-shadow or text-shadow value into Import existing CSS. Valid layers are loaded for editing and parts that cannot be read are reported.

Why use several layers?

A small, tight layer plus a larger, softer one looks closer to real depth than one heavy shadow, for example 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.08). You can reorder, hide and remove layers.

Privacy

Runs on your device. Files and text are processed in this browser tab and are not uploaded.

See the privacy policy for how toolsdocks handles data.