CSS Box Shadow Generator

Create custom box shadows with live preview and copy-ready CSS.

CSS Box Shadow Generator shapes a single box-shadow with six live controls and a preview card that reacts to every slider move. Offset X and Offset Y range −100 to 100px, Blur runs 0–200px, and Spread spans −100 to 100px — each slider showing its px readout. A Color section pairs the native picker with a hex text input, and an "Inset" switch flips the shadow inward by prepending the CSS inset keyword.

The preview is a centered w-48 h-48 card (white in light mode, gray-800 in dark) so both themes show the effect clearly. "CSS Output" holds the complete declaration — box-shadow: {x}px {y}px {blur}px {spread}px {color}; — ready to paste; "Copy CSS" flips to "Copied!" with toast "Copied to clipboard!". Generators are pure string builders in lib/boxShadow.ts; no network, no dependencies.

How it works

generateBoxShadow in lib/boxShadow.ts composes [inset ]{x}px {y}px {blur}px {spread}px {color} — the inset prefix appears only when the switch is on, exactly as CSS requires. generateCssBlock wraps it as box-shadow: {shadow};. The page recomputes with useMemo across all six slice fields (offsetX, offsetY, blur, spread, color, inset from boxShadowSlice) and applies the same string to the preview card's style.boxShadow and the output pane.

Every value is a plain number + px — there's no unit conversion, so what you see on the sliders is literally what lands in the CSS. Only a single shadow tuple is generated per call; layered shadows must be assembled manually after copying.

How to use

Observe the preview card — it updates with every slider move.
Set Offset X and Offset Y (−100 to 100 px each).
Set Blur (0–200 px) and Spread (−100 to 100 px).
Choose Color via the picker or by typing hex in the text field.
Toggle "Inset" for inner shadows.
Read "CSS Output" — the full box-shadow: …; declaration.
Click "Copy CSS" (button becomes "Copied!"; toast "Copied to clipboard!").

Tips

Negative spread shrinks the shadow inside the box edge — pair it with blur for soft, tight elevation.
Inset prepends the keyword exactly as CSS requires ("inset " prefix in the generator).
Preview uses a white card in light mode / gray-800 in dark so shadows read correctly in both themes.
All values are plain numbers + px — no unit conversion surprises between sliders and output.
Copy first, then experiment — every slider move rewrites the single output slot (no history).