Box Shadow Generator

In order: horizontal offset, vertical offset, blur radius and spread. Offsets move the shadow, blur softens its edge, and spread grows or shrinks the whole shape before the blur is applied to it.

Real shadows are not a single blur. Stacking a tight, darker layer close to the element with a wider, softer layer underneath reads as genuine depth, which is why the card and floating presets both use two.

It draws the shadow inside the element instead of outside, which is how you get a pressed or recessed look for inputs, wells and toggles.

Paste it as a class. It uses Tailwind's arbitrary value syntax with underscores instead of spaces, which is required because a class name cannot contain spaces.

Yes, and it is genuinely useful. A negative spread pulls the shadow in so it peeks out only at the bottom, which is the usual trick for a soft, grounded card shadow.

A black shadow has almost no contrast on a dark background. On dark surfaces, either raise the opacity considerably or use a lighter shadow colour with low opacity for a glow instead.

A few static shadows are fine. Very large blur radii on many elements, or animating a box shadow, can cost repaint time; animating opacity on a pseudo-element is the usual workaround.

Yes, completely free with no sign-up and no watermark on the output.