Box Shadow Generator

The CSS `box-shadow` property is the single most-used visual primitive in modern web design after `color` and `border`. Every card, every dropdown, every modal, every elevated button uses it. The property syntax is simple — `x y blur spread color`, optionally prefixed with `inset` — but getting the values right by typing them blindly is hard, and small changes (a 2-pixel blur shift, a 0.1 alpha bump) produce visually large differences. A visual builder closes the loop.

The five tunable values map to physical-light intuition. **X and Y offsets** are where a light source would project the box's outline onto the surface behind it — direct overhead light gives zero X, small positive Y (shadow drops slightly downward); afternoon side-light gives larger X and Y in one direction. **Blur** is how soft the light is — a single point source (a spotlight) gives sharp edges and small blur; a diffuse source (an overcast sky, a large window) gives soft edges and high blur. **Spread** has no direct physical analog but acts like changing the box's size before casting the shadow — useful for the "wider than the box itself" look on hovers, or "tighter than the box" for subtle ambient grounding. **Color + alpha** together give you the apparent shadow intensity.

The convention for natural-looking shadows in modern design systems is unintuitive: **low alpha (0.05–0.25), high blur (20–60 px), and multiple layers.** A single `box-shadow: 0 10px 30px rgba(0,0,0,0.5)` produces something that looks like a hard-edged smudge under the box. The same shape with the alpha dropped to 0.15 and a second tight ambient layer added (`0 1px 2px rgba(0,0,0,0.08)`) reads as a real, grounded element. Material Design's elevation system, Apple's HIG, and most refined modern UIs all stack two to four layers like this. This tool lets you build the stack visually by adding additional layers via the "+" button.

The `inset` keyword inverts the direction. Without it, the shadow is cast on the surface *outside* the box, simulating light hitting the front of the box and projecting back. With it, the shadow falls on the surface *inside* the box, simulating either light hitting the front and being absorbed, or the box being pressed into its surface. Inset shadows are how you get the "pressed button" or "input field with a subtle inner shadow" look — common in older neumorphism designs and in form controls that want to indicate interactivity.

One specific design pattern worth knowing: **the "elevation token"**. Most design systems define a small number of named shadow values (elevation-1, elevation-2, etc.) and reuse them across every component. This means the design has visual consistency — every card uses the same shadow as every other card. Build your shadow once with this tool, copy the output, and store it as a CSS custom property (`--elevation-1: ...`) at the document root. Components reference `var(--elevation-1)` instead of redefining the shadow inline.

The output is plain CSS and works everywhere `box-shadow` does — which is every browser since 2010. Tailwind users can wrap the value in arbitrary-value syntax (`class="shadow-[...]"`) or extract the values into their config's `boxShadow` theme map. styled-components and Emotion accept the string verbatim. Inline styles work too: `style={{ boxShadow: '...' }}` in React.

Everything is browser-native — the preview is a rendered `<div>` with the same `style.boxShadow` you would write yourself, so what you see in the preview is exactly what your users will see in production. No network requests during interaction. The slider state lives only in this page's React tree until you copy the output.