Gliora
Tools

Money

Housing & transport

Life

Tools

Español

CSS box-shadow generator

CSS box-shadow generator

This CSS box-shadow generator lets you build a shadow visually — offset, blur, spread, color and opacity — and copy the ready-made declaration.

Tune it visually, copy the CSS

Adjust the X/Y offset, blur, spread, color and opacity sliders and watch the preview box update live. When it looks right, copy the generated box-shadow line straight into your stylesheet. Everything runs in your browser.

FAQ

What does each box-shadow value mean?
In order: horizontal offset, vertical offset, blur radius, spread radius, and color. A positive vertical offset pushes the shadow down; blur softens the edge; spread grows or shrinks the shadow's size.
How do I make an inset (inner) shadow?
Check the inset option — it adds the inset keyword to the generated CSS, which draws the shadow inside the element's border instead of outside it.
Can I combine multiple shadows?
This tool generates one shadow layer. To stack several, copy each box-shadow value you build here and combine them manually as a comma-separated list in your CSS.