Box Shadow Generator

How Box Shadow Generator works

Create a box shadow with live preview and copy the exact CSS declaration. Everything happens inside this page: the tool reads your input, runs the calculation or conversion locally, and hands the result back to you. Nothing is transmitted, because there is no backend to transmit it to.

That design choice is deliberate. Most free tool sites upload your files to a server, process them there, and quietly keep a copy. Toolcin cannot do that — the site is a set of static files. If your connection dropped the moment the page finished loading, every tool would still work.

The five numbers

A box shadow takes an x-offset, a y-offset, a blur radius, a spread radius and a colour. Y-positive pushes the shadow down, which is why almost every card uses a positive y and a negative spread.

Negative spread shrinks the shadow before it is blurred, which is what makes a soft shadow sit under an element instead of leaking out around it. The default here — 0, 18, 40, −12 — is that pattern.

Layering for realism

One shadow looks flat. Two or three at different blurs and opacities read as real depth: a tight dark one near the element and a wide faint one below it. Copy the generated declaration and add a second value separated by a comma to build the stack.

Keep the shadow colour dark and the alpha low. A pure black shadow at 0.3 opacity looks like a smudge on light backgrounds; the same shadow at 0.08–0.12 looks like depth.

Performance and print

A large blur radius is cheap on a static element and expensive if it animates, because the browser repaints the blurred region every frame. Animating transform instead of the shadow is the usual fix.

Shadows do not print by default in most browsers unless background graphics are enabled. That is fine for interface chrome and wrong for anything where the shadow carries meaning.

Good to know

• Works offline once loaded, including on flights and in locked-down networks.
• No file size limit beyond your device's own memory.
• Free to use, with no account and no usage counter.
• Results are produced locally, so they are not logged or shared with anyone.

Questions