UtilTools

CSS Box Shadow Generator

Layered shadows with a live preview.

CSS Box Shadow Generator builds shadows visually with offset, blur, spread, colour and inset controls, and supports stacking several layers — which is how realistic depth is actually made. It previews on light and dark backgrounds at once and outputs copy-ready CSS.

Loading CSS Box Shadow Generator…

Runs entirely on your device. No file or text you enter here is uploaded. How to verify it.

How to use CSS Box Shadow Generator

  1. Adjust offset, blur, spread and colour.
  2. Add more layers for realistic depth.
  3. Copy the CSS.

Questions about CSS Box Shadow Generator

Why do good shadows use several layers?
Real shadows are not uniform: there is a tight dark contact shadow near the object and a wide soft one further out. One layer gives the flat grey halo that reads as cheap. Two or three layers with different blurs and opacities look convincing.
What is the difference between blur and spread?
Blur softens the edge without changing the size. Spread grows or shrinks the shadow before blurring — a negative spread with a large blur produces the tight, believable shadow directly under an element.
Should shadows be black?
Rarely. Pure black at low opacity reads grey and lifeless. A dark, slightly saturated version of the background hue looks far better, which is why the colour picker defaults to a tinted value.
Do several layers slow a page down?
A large blur is not free to paint, and animating box-shadow repaints the element on every frame. Two or three layers on a static card cost nothing you will notice. If the shadow has to animate, put it on a pseudo-element and animate that element's opacity instead.
Is box-shadow the same as filter: drop-shadow?
No. box-shadow follows the border box, so a transparent PNG still casts a rectangular shadow. filter: drop-shadow() follows the alpha channel of the content, which is what a logo or an irregular shape needs, but it has no spread value. This tool generates box-shadow.
Is CSS Box Shadow Generator really free, with no limits?
Yes. There is no account, no daily cap, no file-size tier and no watermark, because there is no server cost to recover. The site is funded by clearly disclosed partner recommendations on the Partners page, never by metering the tools.
Are my files or text uploaded when I use CSS Box Shadow Generator?
No. Everything is processed by JavaScript running in your browser, on your device. You can verify it: open your browser's developer tools, switch to the Network tab, and use the tool. You will see no request carrying your data — because there is nowhere for it to go.