CSS Box Shadow Generator

Anatomy of the box-shadow property

A single box-shadow is a list of values in a fixed order: horizontal offset, vertical offset, blur radius, spread radius, and color, with an optional inset keyword. Only the two offsets and the color are required; blur and spread default to zero. So the shorthand that reads as 0px 4px 12px rgba(0, 0, 0, 0.15) means no horizontal movement, four pixels down, twelve pixels of blur, no spread, and a 15 percent black. The sliders in this tool write exactly that string for you, but understanding the order makes hand-editing painless.

The offsets place the shadow relative to the box. A positive vertical offset moves the shadow down, which is what you want for the common illusion of a light source above the element; a negative value lifts it up. Horizontal offset works the same way left to right. Offsets are the single biggest cue your brain uses to judge how high an element floats, so reach for them before anything else.

Blur and spread: the two radii people confuse

Blur radius controls how soft the edge is. At zero you get a hard-edged duplicate of the box; as blur grows the shadow fades out over a wider band and looks more like real diffuse light. Most natural shadows use a blur that is roughly two to three times the vertical offset. Note that blur cannot be negative.

Spread is the value almost nobody sets, and it is powerful. A positive spread inflates the shadow outward in every direction before the blur is applied, making it larger than the box; a negative spread shrinks it. A tiny negative spread paired with a downward offset and generous blur is the classic recipe for a shadow that hugs close under a card instead of leaking out the sides. Spread is also how you draw a solid ring: zero offset, zero blur, a few pixels of positive spread, and a flat color.

Inset shadows for pressed and recessed surfaces

Adding the inset keyword draws the shadow inside the element rather than behind it, so the surface appears carved in. This is how you make a text field look like a well, a toggle look depressed, or a panel look inset into the page. The offsets now point toward the inner edge that catches the shadow, so a downward offset darkens the top inner edge, mimicking light falling in from above. Toggle the Inset option in this tool to flip between an outer and an inner shadow and watch the same numbers reverse their meaning.

Layering multiple shadows

The box-shadow property accepts a comma-separated list, and the browser paints each shadow in order with the first one on top. This is the single most useful trick for realistic depth. Real objects do not cast one shadow; they cast a tight, darker contact shadow right under the edge and a wider, fainter ambient shadow further out. Stacking a small low-blur shadow over a large high-blur one reproduces that, and the result reads as far more believable than any single shadow can.

Layering is also how design systems build elevation scales: Material-style elevation is typically two or three stacked shadows tuned together, and bumping a card up a level swaps the whole stack rather than nudging one number. You can even mix an inset shadow with outset shadows in the same declaration to get a lit edge and a cast shadow at once.

Worked example: a soft card shadow

Here is a recipe that looks good on almost any light surface. Start with no horizontal offset so the shadow stays centered, a vertical offset of about 8px, a blur of roughly 24px, and a spread of around negative 6px so it tucks under the card. Use a near-black color but drop the opacity to about 12 percent, expressed as rgba(0, 0, 0, 0.12). The negative spread keeps the soft edge from bleeding past the corners, the low opacity stops it from looking like a smudge, and the moderate offset suggests a gentle overhead light. For an extra-crisp result, layer a second shadow with a 1px offset, near-zero blur, and roughly 6 percent black to fake a sharp contact line.

Common mistakes and how to avoid them

The most frequent error is a fully opaque, pure-black shadow with high blur, which reads as muddy and artificial rather than as light. Colored backgrounds make this worse: a black shadow over a saturated blue looks dirty, so tint the shadow toward the background hue instead. Another mistake is treating spread as a second blur control; it is not, and leaving it at zero while cranking blur is why some shadows feel both fuzzy and too small.

People also confuse box-shadow with the drop-shadow filter. box-shadow always follows the element's rectangular box, including its border-radius, so a transparent PNG inside the box still gets a rectangular shadow. The filter drop-shadow traces the actual non-transparent pixels, which is what you want for irregular shapes and cut-out images. Use box-shadow for cards, buttons, and panels; reach for the filter when the silhouette is not a rectangle.

Performance and the large-blur trap

Shadows are painted by the browser, and very large blur radii are genuinely expensive, especially when they animate or appear on many elements at once. Animating the blur or spread of a big shadow can cause repaints every frame and stutter on lower-end devices. If you need a shadow to grow on hover, a smoother approach is to pre-render the larger shadow on a pseudo-element and animate its opacity instead, since opacity is cheap to composite. Keep blur values reasonable, avoid hundreds of shadowed nodes on screen at once, and your interfaces will stay smooth.