CSS Box Shadow Generator

The generator builds a CSS box-shadow from independent layers, each with its own offset-X, offset-Y, blur, spread, color, opacity and inset flag. Each parameter has its own slider with fixed ranges: offset-X and offset-Y run from -100px to +100px, blur from 0 to 100px, spread from -50 to +50px, and opacity from 0 to 100%. The box you preview against has its own background color (default #3b82f6) and a border-radius slider that runs 0 to 50px. Color is picked as a hex value but emitted through an internal hexToRgba conversion, so the output never contains a bare hex shadow color: it is always rgba(r, g, b, opacity/100), letting opacity ride alongside the color instead of forcing an 8-digit hex.

Multiple layers are the point of the tool, and the order of the layers is load-bearing. Visible layers are concatenated with a comma in array order into a single box-shadow declaration, and in CSS the first shadow in the list paints on top of later ones. The UI exposes MoveUp/MoveDown buttons to reorder layers, a per-layer eye toggle that excludes a layer from the output without deleting it (only layers with visible:true are included), an inset toggle that prepends the inset keyword, and add/delete controls. This makes the layered-realism technique explicit: instead of one shadow, you stack several with growing offset-Y and blur and low per-layer opacity. The bundled Layered preset does exactly that with five black shadows at offsetY/blur of 1, 2, 4, 8 and 16px, each at only 5% opacity, which reads as smoother, more natural depth than a single hard shadow.

Twelve presets seed common looks and double as documentation of the values: Subtle, Medium, Large, Soft, Hard, Glow, Neon, Inset, Pressed, 3D Button, Layered and Floating. Several use negative spread (Medium and Large pair shadows at spread -1/-2 and -3/-4) so the shadow is pulled in tighter than its blur, the trick for a tight elevation shadow that does not bleed sideways. Neon stacks three zero-offset #22c55e glows at blur 10, 30 and 60px with falling opacity (80/50/30%); Pressed combines a dark inset top shadow with a faint white inset highlight. The generated box-shadow declaration is shown in a copy-to-clipboard code block, and the full configuration (shadow layers, box color, border radius) is serialized into the URL query as s/c/r params on a 500ms debounce, so a given shadow has a shareable link and reloads exactly as configured.