CSS Box Shadow Generator

The CSS box-shadow property draws one or more shadows around (or inside) an element without images. This generator writes the value from offsets, blur, spread, color and opacity, validates any extra layers you add, and renders the result on a sample card in your own browser, so the preview is exactly what the CSS produces. Presets include the Tailwind CSS shadow scale, a smooth five-layer shadow, a focus ring and a neumorphic pair.

How to use this tool

1. Pick a preset, or keep "Custom" and set the offsets, blur, spread, color and opacity.
2. Tick Inset for an inner shadow.
3. Add extra layers, one per line, for layered or ring effects.
4. Copy the CSS line; adjust the preview card and background colors to match your page.

Formula

box-shadow: [inset] <x> <y> <blur> <spread> <color> [, more layers]

Positive x moves the shadow right and positive y down. Blur softens the edge (it cannot be negative); spread grows or shrinks the shadow before blurring — a negative spread keeps a large blur from peeking out at the sides.

Example

The defaults — 0 px across, 8 px down, 24 px blur, −4 px spread, black at 20% — give box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.2);, a soft shadow that sits below the card. Adding the layer 0 0 0 1px red outlines the card with a 1 px ring without changing its size.