CSS Multi-Layer Box-Shadow Generator

Features

• Adjustable horizontal and vertical offset, blur and spread
• Colour picker for the shadow colour, with opacity on its own control
• Outer, inner, or both at once
• 2 to 5 stacked layers, each larger and fainter than the last
• Five presets: card, hover, pressed, inset and long shadow
• Every change redraws the preview instantly, with no Generate button
• A copyable box-shadow and border-radius rule below
• Syntax-highlighted code with a one-click copy button
• Everything is computed in your browser; nothing is uploaded

How to use

1. Pick the type: outer, inner or both
2. Drag offset, blur and spread, and use the picker for colour and opacity
3. For a softer stack, raise the layer count and tune the step scale
4. Start from a preset if you like, refine it, then copy the CSS

FAQ

Why did a negative spread not turn my shadow into an inner shadow?

Because the inner shadow is a different keyword: `inset`. A negative spread only pulls the shadow inwards (possibly until it disappears); it is still painted outside the box. Only `inset` paints it inside the content area and casts it in the opposite direction. The two sometimes look similar at a glance, which is exactly why this tool lists inner as its own type.

In a stack, which shadow is on top?

The first one listed, the opposite of the `z-index` rule that a larger number wins. In `box-shadow: a, b`, `a` covers `b`. So for a tight shadow plus a soft halo, the tight one usually goes first and the soft one second (often fainter). This tool writes the base layer first and the larger, fainter layers after it.

Why is the blur zero for the long-shadow preset?

A long shadow has hard edges: it is built from a run of unblurred, offset shadows that form a diagonal streak, and any blur breaks it up. The preset sets blur to zero; change the offset direction and the layer count to make it longer or steeper.

Does a shadow affect layout?

No. `box-shadow` is painted, so it takes no layout space, does not enlarge the box and never triggers a scrollbar — unlike `border`. It does paint over neighbouring content, though, so a very large shadow can overlap elements beside it; reduce the spread or raise those elements in the stacking order.