Box Shadow Generator — CSS box-shadow Builder

A box shadow generator turns five fiddly numeric values — offset, blur, spread and color — into a shadow you can actually see and tune in real time, instead of guessing pixel values and refreshing your browser over and over. Drag the sliders above, watch the preview card respond instantly, and copy the finished box-shadow declaration straight into your CSS.

Arb Digital's designers reach for a box shadow generator on almost every client build — cards, buttons, modals, and navigation bars all lean on subtle shadows to feel layered and alive rather than flat. Getting a shadow to look intentional rather than accidental takes fine control over blur and opacity, which is exactly what a live, visual generator gives you that hand-typed CSS values don't.

What This Box Shadow Generator Does

Adjust the horizontal offset, vertical offset, blur radius, spread radius, shadow color and opacity independently, and toggle between an outer drop shadow and an inset inner shadow. The preview card updates on every change, so you can see exactly how each value shapes the shadow before you commit any CSS. When you're happy with the result, copy the generated box-shadow line directly from the code box — it's a complete, valid declaration ready to paste into any selector.

How to Use the Box Shadow Generator

1. Set the horizontal and vertical offset. These move the shadow left/right and up/down relative to the element. A shadow with 0 horizontal offset and a positive vertical offset sits directly beneath the element — the most common look for cards and buttons.
2. Adjust the blur radius. Higher blur spreads the shadow's edge into a soft fade; 0 blur produces a hard, sharp-edged shadow.
3. Adjust the spread radius. Positive spread grows the shadow larger than the element in every direction before blur is applied; negative spread shrinks it — useful for keeping a soft shadow from looking oversized.
4. Pick a color and opacity. Most professional shadows use a low opacity, often 10–30%, rather than solid black.
5. Toggle inset if you want an inner shadow. This flips the shadow to render inside the element's border instead of outside it.
6. Copy the CSS. Grab the finished box-shadow value and paste it into your stylesheet.

The Five box-shadow Values — What Each One Actually Does

Per the MDN box-shadow reference, the property accepts up to five space-separated values plus an optional inset keyword: offset-x offset-y blur-radius spread-radius color. Understanding what each one geometrically does makes tuning a shadow far more intuitive than trial and error:

• offset-x — moves the shadow horizontally. Positive values push it right, negative values push it left. Most natural-looking shadows (light coming from above) use 0 or a very small horizontal offset.
• offset-y — moves the shadow vertically. Positive values push it down, negative values push it up. This is the value that does the most work in a typical "card floating above the page" effect — a positive vertical offset with no horizontal offset reads as light falling from directly above.
• blur-radius — controls how much the shadow's edge fades out. 0 produces a razor-sharp edge; larger numbers spread the shadow into a soft, diffuse glow. This is the single biggest lever for making a shadow look "premium" versus "cheap" — hard-edged shadows read as flat clip-art, soft ones read as genuine depth.
• spread-radius — grows or shrinks the shadow's shape before blur is applied. A positive spread makes the shadow larger than the element on every side; a negative spread pulls it in smaller than the element, which is a common trick for keeping a heavily blurred shadow from looking oversized and bleeding too far past the element's edges.
• color — the shadow's color, almost always used with an alpha channel (via rgba, hsla, or a hex code with an alpha pair) rather than a fully opaque color, because real shadows are semi-transparent, not solid.

Layering Multiple Shadows for Realistic Depth

The box-shadow property accepts a comma-separated list of shadows, and this is the trick that separates an amateur shadow from one that genuinely reads as physical depth. A single shadow, no matter how carefully tuned, tends to look like exactly what it is — one flat blur behind an element. Real-world shadows, by contrast, are made of both a tight, subtle contact shadow close to the object and a larger, softer ambient shadow further out — which is why many professional design systems (Material Design's elevation system among them) stack two or three shadows together, for example:

• A small, tight, slightly darker shadow close to the element (small offset, low blur) for the contact point.
• A larger, much softer, lower-opacity shadow further out (bigger offset, high blur) for the ambient falloff.

Written as CSS, that looks like box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.10); — two shadows separated by a comma, rendered together as one combined result. This generator produces a single, precisely-tuned shadow value that you can use exactly as-is, or as the first layer in a hand-built multi-shadow stack of your own for even more convincing depth.

Inset Shadows — Building an Inner Shadow

Add the inset keyword and a box-shadow flips from rendering outside the element's border to rendering inside it, hugging the inner edge instead of casting outward. Inset shadows are the standard way to give a form input a subtly "pressed in" or recessed feel, to add depth to a pressed-button state, or to create a soft vignette effect around the inside edge of a card or panel. The math for offset, blur, spread and color works identically for inset shadows — only the direction the shadow renders changes, which is exactly what the inset toggle in this generator controls.

Why Subtle Shadows Look More Professional

The single biggest tell that separates a polished interface from an amateur one is shadow opacity and blur. A shadow at 80–100% opacity with 0 or minimal blur reads immediately as a cheap drop-shadow filter slapped on without thought — heavy, flat, and dated. A shadow at 10–25% opacity with a generous blur radius, by contrast, reads as genuine ambient light and depth, because that's much closer to how light actually diffuses around a real object. If a shadow you've built looks harsh, the fix is almost always the same: lower the opacity, raise the blur, and consider pulling in the spread slightly to compensate for the softer edge growing larger. Try it directly in the generator above — drop the opacity slider toward 15–20% and push blur up, and watch the preview shift from "sticker" to "floating card."

Performance: Animating box-shadow vs a Pseudo-Element

Animating box-shadow directly — for a hover effect that grows a card's shadow, for example — forces the browser to repaint the shadow on every single frame, because blur and spread changes aren't something the GPU can composite cheaply the way it can a transform or opacity change. On a complex page or a lower-powered device, animating box-shadow on many elements at once can visibly drop frame rate.

The higher-performance alternative many production sites use: keep the box-shadow itself static, and instead animate the opacity of a second, absolutely-positioned pseudo-element (::after) that sits behind the element and carries a heavier, pre-built shadow. Fading that pseudo-element's opacity in and out on hover is a compositor-only animation — cheap, smooth, and GPU-accelerated — while still producing the visual effect of the shadow "growing." For a handful of elements or an infrequent transition, animating box-shadow directly is usually fine; for many elements or a frequent, always-on animation, the pseudo-element approach holds up far better under load.

Common Mistakes to Avoid

• Using solid black at full opacity. Real shadows are never fully opaque; keep opacity low, typically 10–30%, for a natural look.
• Zero blur on everything. A hard-edged shadow with no blur reads as a flat sticker outline rather than genuine depth — add at least some blur radius.
• Forgetting negative spread exists. A heavily blurred shadow can look oversized; pulling spread slightly negative tightens it back toward the element's actual size.
• Animating box-shadow on many elements at once. This can hurt performance on complex pages — consider the pseudo-element opacity technique for frequent or widespread shadow animation.
• Ignoring inset for interactive states. Pressed buttons and focused inputs often look more convincing with a small inset shadow than with an outer one.

Related Free Tools From Arb Digital

Pick your shadow color precisely with the hex to RGB converter or the RGB to hex converter, then check it against your background with the color contrast checker. Pair a shadow with a matching background using the CSS gradient generator, round the element's corners with the border radius generator, or explore colors visually with the color picker & converter. Browse every tool at our free online tools hub.

Frequently Asked Questions