Box Shadow Generator

How to use Box Shadow Generator

1. Adjust the offset, blur, spread and color sliders and watch the preview update.
2. Add more shadow layers to build depth — realistic shadows use three or four.
3. Copy the CSS, or start from one of the elevation presets.

What does each box-shadow value control?

The syntax is box-shadow: [inset] x y blur spread color, and each parameter does something visually distinct.

The parameter people underuse is negative spread. A shadow with a slight negative spread pulls in from the element edges, which reads as the object being closer to the surface — a much more natural look for cards than the default.

Why do my shadows look fake?

Almost always because there is only one of them, and it is too dark.

A real shadow is not a single blur. Light comes from an area source, so an object casts a tight, dark contact shadow directly beneath it, and a broader, much softer ambient shadow spreading further out. Reproducing that needs at least two layers, and three is better.

The second mistake is opacity. A shadow at rgba(0,0,0,0.5) is far darker than anything in the physical world at that blur radius. Real elevation shadows sit between 4% and 20% alpha. If your card looks like it is floating in a void, halve the alpha and double the blur.

The third is color. Pure black shadows look dead because real shadows take on the color of the ambient light around them. Tinting the shadow toward the background hue — a deep navy on a navy page, rather than black — is what makes a UI feel considered.

How do I build a realistic elevation system?

Pick a light direction and keep it consistent across the entire interface, then define a small ladder of elevations rather than choosing shadows per component.

A three-layer recipe that works: a 1px hairline at low alpha for the contact edge, a medium blur at 6–10% for the main body, and a wide blur at 4–6% for the ambient spread. Scale all three together as elevation increases — higher objects cast larger, softer, fainter shadows and sit further from their contact shadow.

Five levels is enough for any interface: resting (0), raised (1), overlay (2), modal (3), and dragging (4). Material Design uses a similar ladder, and the discipline of a fixed set is what makes elevation read as a system rather than decoration.

What is the difference between box-shadow and drop-shadow?

box-shadow follows the element’s rectangular box, honoring border-radius but nothing else. filter: drop-shadow() follows the element’s actual rendered shape, including transparency in a PNG, the outline of an SVG path, and clipped shapes.

For a card or a button, use box-shadow — it is cheaper and it does what you want.

For a logo with transparency, an icon, or anything with a clip-path, use filter: drop-shadow(). A box-shadow on a transparent PNG produces a rectangle floating behind it, which is the giveaway of a shadow applied to the wrong property.

The trade is cost. drop-shadow is a filter operation and can force a repaint on animation, whereas box-shadow on a static element is comparatively cheap.

Frequently asked questions