A box-shadow is written as offset-x offset-y blur spread color. Offset-x moves the shadow right (or left if negative) and offset-y moves it down (or up if negative). The blur radius softens the edge — larger values give a bigger, lighter shadow, and it cannot be negative. The spread radius grows the shadow with positive values or shrinks it with negative ones. The colour usually uses rgba() so you can set opacity. Adding the inset keyword draws the shadow inside the box instead of outside. The AnyTool generator exposes each of these as a slider on every layer.

A single shadow looks artificial because real shadows are not a uniform blur. The layered technique stacks several box-shadows separated by commas, increasing the offset and blur on each one while easing the opacity down, which reads as a soft, natural shadow. AnyTool lets you add up to eight layers and reorder them, or switch to Smooth mode where you set an elevation and a light angle and it auto-generates a multi-layer stack — the same approach modern design systems like Material, Stripe and Linear use for premium-feeling depth.

Without the inset keyword, box-shadow draws outside the element’s border box, making it look raised above the surface. Adding inset draws the shadow inside the element, clipped to its padding box and following the border radius, so it looks recessed or pressed in — useful for input fields, pressed buttons and neumorphic UI. You can even combine outer and inset shadows on the same element. Each layer in the AnyTool editor has its own inset toggle.

AnyTool CSS Box Shadow Generator runs entirely in your browser. Your shadow is just a model of numbers and colours; the CSS declaration, the full rule with a -webkit fallback and the Tailwind arbitrary value are strings built from it locally. No design data or settings are ever sent to a server, and the page works offline once cached.