Visually design CSS box-shadows with a live preview. Supports multi-layer stacks.
A visual CSS box-shadow generator with live preview. Compose single or multi-layer shadow stacks — adjust offset, blur, spread, color, opacity, and inset — and copy production-ready CSS in one click. Everything runs in your browser; no sign-in or upload required.
Tweak the first layer
Use the X/Y offsets to position the shadow, then dial in blur and spread. Pick a color and opacity that matches your design system.
Stack more layers for depth
Click Add layer to build realistic, multi-layer shadows. Designers often combine a tight, dark layer with a softer, wider one for natural elevation.
Toggle inset when needed
Flip the Inset switch on a layer to render the shadow inside the element — great for pressed buttons, input wells, and inner glows.
Copy the generated CSS
Click Copy to grab the full `box-shadow` declaration. Paste it straight into your stylesheet, Tailwind config, or CSS-in-JS.
Click Add layer. Each layer is appended to the CSS `box-shadow` value, separated by commas — exactly how the CSS spec stacks shadows from top (first) to bottom (last).
Blur softens the edge of the shadow (higher = more diffuse). Spread grows or shrinks the shadow's size before the blur is applied (negative values pull it in).
Inset renders the shadow inside the element instead of outside. Use it for pressed/active states, input field wells, or to simulate inner highlights and grooves.
Yes. Copy the value after `box-shadow:` and drop it into `tailwind.config` under `theme.extend.boxShadow`, or use an arbitrary value like `shadow-[0_8px_24px_rgba(0,0,0,0.15)]`.
Modern browsers handle a handful of shadow layers fine. If you're animating shadows on many elements at once, keep the layer count low and prefer compositor-friendly properties.