Shadows are how a flat screen suggests depth. A card that sits slightly above the page, a button that appears pressable, a dialog that floats over dimmed content — all of these effects rely on a shadow that the eye reads as a physical cue, even though nothing on the screen has any real depth. Done well, a shadow is almost invisible as a separate element: the viewer simply feels that one thing is above another. Done badly, it is the first thing anyone notices, and not in a good way: a harsh, dark, sharply edged shadow looks like a stain, and a huge, blurry one looks like fog.

The CSS Box Shadow Generator gives you control over every part of a shadow. You set its offsets, blur, spread, colour and opacity, preview the result, and copy the box-shadow CSS. The preview is essential, because shadow values are notoriously hard to predict from numbers alone: the difference between a blur of 8 pixels and 24 pixels is obvious to the eye and meaningless as a pair of numbers until you have seen both.

How the tool works

A box shadow is defined by a sequence of values. The first two are offsets: the horizontal offset, which moves the shadow left or right, and the vertical offset, which moves it up or down. Positive vertical offsets move the shadow downward, which is the natural direction for a light source above the page, and most interface shadows use a small downward offset with no horizontal offset at all. A horizontal offset is useful for directional effects, but a large one quickly looks like the element is sliding rather than lifting.

The third value is the blur radius. A blur of 0 produces a sharp-edged shadow, like a cut-out. Larger blurs soften the edge progressively, so the shadow fades into the background. The fourth value is the spread radius, which expands or contracts the shadow's size before blurring: a positive spread makes the shadow larger than the element, a negative spread makes it smaller. Colour and opacity complete the picture. Most interface shadows use black with a low opacity, which reads as a neutral shadow over any background, rather than a solid grey, which can look dirty against coloured surfaces.

Shadows can also be layered: several shadows, separated by commas, stack on top of each other. Designers often combine a small, sharp shadow with a larger, softer one to suggest both a close surface and a distant one. The generator lets you build a shadow step by step, and the preview shows the combined effect, which is far easier to judge than any single value in isolation.

A worked example

Suppose you are styling a card on a white page and you want it to lift gently, as if it were a sheet of paper resting just above the surface. You set the horizontal offset to 0, so the shadow sits directly behind the card. You set the vertical offset to 8 pixels, so the shadow falls downward. You set the blur to 24 pixels, so the edge softens gradually. You set the spread to 0, so the shadow is the same size as the card. You choose black at a modest opacity, so the shadow darkens the page slightly without looking like a grey box.

The generated CSS reads, in essence: box-shadow: 0 8px 24px with a semi-transparent black colour. In the preview, the card appears to float a short distance above the page: the shadow is visible beneath it, darkest near the card's edge and fading outward, exactly as a real shadow behaves when an object is close to a surface.

Now consider two variations that show why each value matters. Increase the vertical offset to 32 pixels and the blur to 48 pixels, and the card appears to float much higher: the shadow is further away and more diffuse, which suits a dialog or a raised panel but overwhelms a small card in a dense grid. Reduce the blur to 2 pixels with the same offsets, and the shadow becomes a hard dark outline, which reads as a border rather than a shadow and makes the card look heavy. The well-judged version sits between those extremes, and finding it is a matter of watching the preview, not calculating it.

Common mistakes

The first mistake is opacity that is too high. A shadow at full black opacity is almost never right for an interface, because real shadows are translucent. Start low — around a tenth to a quarter opacity — and increase only if the shadow disappears against your background. A shadow that is visible on a white background may vanish on a dark one, and vice versa, so test against the backgrounds your component will actually sit on.

The second mistake is using shadows to fake borders. A sharp, dark, low-blur shadow around an element is a border by another name, and it usually looks worse than a real border, because it extends outside the element's box and interacts oddly with neighbouring elements. If you want an outline, use a border. Reserve shadows for depth.

The third mistake is shadow overload: every element on the page casting a shadow, including elements that sit at the same visual level. When everything floats, nothing floats, and the page acquires a murky, heavy feel. Give shadows to the elements that genuinely sit above others — dialogs, raised cards, floating buttons — and leave flat content flat.

The fourth mistake is forgetting that shadows have a performance and accessibility dimension. Very large blurs on many elements can slow rendering on weaker devices, and a design that relies solely on shadow to distinguish interactive elements from static ones will fail for users who cannot perceive the depth cue. Pair shadows with other signals — labels, contrast, placement — so that no meaning depends on shadow alone.

Honest limitations

A shadow generator previews one element on one background. It cannot show how a shadow behaves in a complex layout, over an image, or in dark mode, where a black shadow may be invisible and a lighter approach is needed. It also cannot judge taste: the tool will happily generate an enormous, garish shadow if you ask for one. The preview helps you see it, but the decision to reject it is yours. Finally, shadows are a visual cue, not a structural one: they do not change the reading order, the tab order, or the meaning of a page for assistive technology, so never rely on a shadow to communicate something essential.

Closing

Start with no horizontal offset, a small downward offset, generous blur, no spread, and low-opacity black, then adjust by eye in the preview and test against your real backgrounds. To round the card the shadow falls from, try the CSS Border Radius Generator, and to fill it with colour, see the CSS Gradient Generator. For controlling which element appears on top when shadows overlap, read CSS Z-Index Generator: Fix Stacking Order Fast.