Create single or layered box shadows visually. Fine-tune offset, blur, spread, color and opacity, preview every change, then copy clean CSS.
Start with a preset or build your own shadow one layer at a time. Drag the preview itself to position the active shadow.
Combine soft ambient shadows with crisp directional depth.
Tune offset, blur, spread, opacity, color and inset mode.
Get ready-to-use box-shadow code for your stylesheet.
Choose a preset, then adjust the horizontal and vertical offset, blur, spread, color and opacity. Add another layer for richer depth, or drag the preview to position the active layer naturally. When it looks right, select Copy CSS.
It draws one or more shadows around an element using offset, blur, spread, color and an optional inset keyword.
Yes. CSS supports comma-separated shadow layers, which this generator formats automatically.
Yes. Turn on inset mode for any layer to place that shadow inside the element.
Yes. It is free, requires no account and creates the CSS locally in your browser.
Keep your frontend workflow moving with these free online CSS generators.