Is the box shadow generator free?
Yes. It is completely free to use, with no signup, no account, and no paywall.
Can I use the generated CSS in commercial projects?
Yes. The CSS you copy from the tool is yours to use in any project, personal or commercial, with no attribution needed.
Does it stay local?
Yes. Everything runs in your browser, and nothing you configure is uploaded to a server.
Why does my shadow look harsh and fake?
Almost certainly because it is fully opaque. The colour picker gives you a solid hex value, and a solid shadow paints a flat block of colour rather than darkening what is behind it. Real shadows are semi-transparent. Take the hex the tool produces, convert it to rgba, and set the alpha somewhere between 0.1 and 0.25. That one change does more for realism than any adjustment to the blur or the offset.
How do design systems get that soft, layered depth?
By stacking shadows. box-shadow accepts a comma-separated list, and the convention is to combine a small, relatively dark shadow with almost no blur, which reads as the object touching the surface, with a much larger and fainter one that reads as ambient light. Two or three layers, each with a different offset, blur, and alpha, produce depth that a single shadow never achieves no matter how you tune it. Generate one layer here and duplicate it.
What does the spread value actually do?
It grows or shrinks the shadow before the blur is applied. A positive spread makes the shadow larger than the element in every direction, which reads as a halo or a glow. A negative spread pulls it in, so that after the blur softens the edges the shadow sits neatly beneath the element rather than leaking out at the sides. Most attractive drop shadows use a negative spread with a generous blur and a downward offset.
Is box-shadow expensive to render?
It does not affect layout, so it never causes a reflow, but it does cost paint time and the cost scales with the blur radius and the painted area. A page with a handful of shadowed cards is fine. A long scrolling list where every row carries a 60-pixel blur will drop frames on a mid-range phone. If you need to animate one, animate the opacity of a pseudo-element carrying the shadow rather than animating box-shadow directly.
Does the preview run locally?
Yes. The preview is a real element with the generated declaration applied, so it renders exactly as it will on your page, and nothing you configure is sent anywhere.