Written by Jane Smith · Reviewed by Sarah Mitchell · July 15, 2026
Design pixel-perfect box shadows with interactive controls. Adjust offset, blur, spread, and color. Stack multiple shadows for complex effects.
A box-shadow declaration is built from a handful of numbers, and the Box Shadow Generator lets you set each one with a slider while watching the result. The horizontal offset pushes the shadow left or right, the vertical offset pushes it up or down, the blur radius softens its edge, and the spread radius grows or shrinks the shadow as a whole. A color picker sets the tint and an opacity slider sets how much of it shows. You can stack any number of layers, and each layer keeps its own settings.
The classic card shadow asks for a horizontal offset of 0, a vertical offset of 4px, a blur of 6px, no spread, and black at 10% opacity. Those settings produce box-shadow: 0 4px 6px rgba(0,0,0,0.1), the quiet drop that lifts a card off a white page. The generator always writes the spread value even when it is zero, so its output for the same settings reads box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.1);. Negative offsets flip the shadow: -4px on the vertical axis hangs it above the element instead of below.
Turning a layer inset moves the shadow inside the element, which is how recessed inputs, pressed buttons, and inner glows are drawn. The tool prefixes the declaration with the inset keyword, so an inner shadow reads box-shadow: inset 0px 2px 8px 2px rgba(0,0,0,0.2);. Multiple layers are joined with commas, and the first layer listed sits on top. A realistic depth effect usually stacks two layers: a tight, dark one that anchors the object to the surface and a wide, faint one that suggests ambient light, each with its own offset and blur.
A blur radius of zero draws a hard-edged shadow with no feathering, which can look harsh but is sometimes exactly what a crisp outline requires. A negative spread shrinks the shadow smaller than the element, and combined with a blur it can produce the tight halo behind a highlighted panel. Shadows never take up layout space: the element's box stays where it was, and a large offset or blur can overflow the parent container, which is why pages sometimes clip the effect with an overflow: hidden that quietly removes it. Very large blur values cost the compositor extra work, so a page full of heavy shadows can stutter while scrolling.
The box shadow follows the rectangle of the element, while the CSS filter: drop-shadow() follows the visible shape, including transparent corners and cutouts. For a PNG with alpha transparency, drop-shadow is the honest choice.
A single shadow rarely carries depth on its own. Stack two layers with different offsets and blur values, one tight and dark, one wide and faint, and the element reads as genuinely raised.
Yes, with care. Transitioning the offset, blur, and color properties animates smoothly, and small changes look better than large ones. A hover effect that raises a card usually shifts the vertical offset by a few pixels and strengthens the shadow slightly.
An ancestor with overflow clipping is trimming it. Set overflow: visible on the containers between the element and the page edge, or add padding around the element so the shadow has room.
Yes. A shadow tinted with the page background color reads as depth, while a pure black at the same opacity reads as dirt. Keeping opacity between 5 and 20 percent is the range where most shadows look intentional.
Shadows are the cheapest way to say which elements sit above the page. Cards, modals, dropdown menus, and floating action buttons all use them to claim elevation, and a well-tuned shadow beats a border for separating content from background. Reach for the generator when you want to compare offsets and blur values side by side before committing the line to your stylesheet. Skip the effect when the element has an irregular silhouette, where drop-shadow serves better, and avoid thick shadows on large surfaces or inside scroll containers where the compositor has to repaint them constantly. All of the tuning happens in your browser, with nothing uploaded anywhere.
Every layer in the output follows one fixed order: horizontal offset, vertical offset, blur radius, spread radius, and then the color. The generator converts the chosen hex color into an rgba() triple, red, green, and blue each on a 0-to-255 scale, and appends the opacity slider as the alpha channel, so black at 15 percent becomes rgba(0,0,0,0.15). The inset keyword, when enabled, goes at the very front of the layer, before the numbers. Layers are separated by commas, and because the browser reads left to right, the first layer paints on top of the ones after it. Reading the declaration back is straightforward: two offsets position the shadow, the blur and spread shape its edge, and the color decides whether it reads as depth or as smudge.
One common confusion is the spread sign. A positive spread grows the shadow past the element's edges in every direction, while a negative spread pulls it inside, which is why the same offset and blur look different once the spread moves. The generator's spread slider runs from -20 to 20, so both behaviors are reachable without typing numbers by hand.