CSS Box Shadow Generator

Anatomy Of A Box Shadow

CSS `box-shadow` takes five parameters: horizontal offset (positive = right), vertical offset (positive = down), blur (edge softness), spread (size increase/decrease), and color. An `inset` keyword flips it from an outside drop-shadow to an inner glow. That's the whole vocabulary — yet it produces everything from Material Design elevations to neon glows to pressed-button states. The tool exposes each parameter as its own slider so you can dial in the exact effect without CSS trial-and-error.

Stacking Shadows For Depth

Single shadows look flat; stacked shadows look designed. The standard trick is one tight close shadow (low blur, low opacity) for crispness at the edge, plus a wider diffused shadow (high blur, offset down) for ambient depth. Material Design's elevation system is exactly this — every elevation level is two stacked shadows. Click the 'Add shadow layer' button to stack up to 10. Each layer has its own color, opacity, and inset toggle — so you can mix inset and outset layers for interesting depth illusions.

Color And Opacity Strategy

Pure black shadows (`rgba(0, 0, 0, 0.x)`) are safe but can look muddy on colored backgrounds. For richer shadows, tint toward the background color's complement, or toward the brand color itself — a slightly violet shadow on a violet-accent site feels more cohesive than a generic gray one. Opacity 10-20% reads as subtle; 30-50% reads as prominent; 60%+ reads as intentional, stylised, or stylised-retro. Neon glows often use the same color as the element at 60-80% opacity with 0 offset and high blur.

Inset Shadows Make UI Feel Tactile

Inset shadows render inside the box instead of outside. This is how you fake 'pressed button' states (small inset shadow on mousedown), recessed input wells (soft inset across the top edge), or embossed panels (two insets, one light from top-left and one dark from bottom-right). The tool supports inset per-layer — mix inset and outset shadows freely to create raised + carved combinations.

All Processing Happens Locally

The generator builds the CSS string right in your browser. Nothing about your design — colors, sizes, or the final shadow — is transmitted anywhere. Paste the `box-shadow: ...` output directly into your CSS file, Tailwind `shadow-[...]` arbitrary value, or inline style attribute.

Can I stack multiple shadows?

Yes — use the 'Add shadow layer' button. CSS box-shadow accepts a comma-separated list. Stacking two or three layers (a tight close shadow + a wider soft one) is how Material Design and modern card UIs get their depth.

What's the difference between blur and spread?

Blur softens the shadow's edges — 0 gives a crisp drop, higher values diffuse it. Spread grows or shrinks the shadow uniformly — positive spread makes the shadow larger than the box, negative spread pulls it inside. Spread is how you get 'glowing border' effects.

When should I use inset?

Inset renders the shadow inside the box instead of outside. Classic uses: pressed-button states, inset text fields, well/recessed panels. Combine inset + outset shadows for interesting depth illusions.

Is there a performance cost?

Box shadows are painted on the GPU on all modern browsers, so static shadows cost effectively nothing. Animating blur or spread triggers repaints and can jank on slow devices — prefer transform animations instead.