CSS Box Shadow Generator
Stack up to four shadow layers, tune each one visually, and copy the finished box-shadow declaration.
About the Box Shadow Generator
Each layer maps directly onto the four numbers CSS expects, offset-x, offset-y, blur radius and spread radius, plus a color and the optional inset keyword for pressed-in shadows. Stacking several layers (for example a tight dark shadow with a soft wide one behind it) is what most realistic drop shadows in modern UI actually use, and the tool joins every layer's values into a single comma-separated box-shadow line so you can paste it straight into a stylesheet.
Blur and spread aren't the same thing
It's easy to assume blur and spread both just "make the shadow bigger," but they're geometrically different operations. Spread radius grows (or, with a negative value, shrinks) the invisible shadow rectangle itself by the given amount on every side before anything else happens, a spread of 10px makes the underlying shadow shape 10px larger in each direction, with hard edges. Blur radius then softens whatever edges that shape has, spreading its color outward in a soft gradient roughly like a Gaussian blur, without changing the shadow's underlying size. A tight, small blur with positive spread reads as a hard-edged card outline; a large blur with zero or negative spread reads as a soft ambient glow. Real depth (like Material Design's elevation shadows) usually combines both across two stacked layers rather than cranking either one value to an extreme.
Why layer order matters when stacking shadows
When you add multiple shadow layers, the CSS spec renders the first-listed shadow in front (closest to the viewer) and later ones progressively further back. This tool preserves that behavior exactly, Layer 1 always appears first in the comma-separated output, so if you're building a two-layer effect, put your tight, dark, sharp-edged shadow as Layer 1 and your soft, wide, low-opacity ambient shadow as a later layer, that ordering is what makes the combined result look like it has real depth instead of a flat double outline.
How the color and opacity controls become one rgba() value
The color picker only stores a plain hex color with no alpha channel, so this tool separately tracks an opacity percentage per layer and combines the two right before rendering. It strips the #, expands a 3-digit shorthand hex (like #0f0) into its full 6-digit form, parses out the red, green, and blue channel pairs with parseInt(..., 16), and converts your 0-100 opacity percentage into a 0-1 alpha value rounded to two decimal places. The final shadow color is always emitted as an explicit rgba(r, g, b, a) string rather than hex, since raw hex has no way to express partial transparency.
What inset actually changes
Checking Inset doesn't move or resize the shadow, it flips which side of the element's edge the shadow is drawn on. A normal (non-inset) shadow is cast outward from the box as if a light source were behind the element. An inset shadow is drawn inward, appearing to carve a recess into the surface, which is exactly the visual language used for pressed buttons, active toggle states, and input fields that look "sunken" when focused. The inset keyword must come first in the value, before the offset numbers, which this tool handles automatically in the generated output.
The four-layer cap and why it exists
The tool limits you to four shadow layers at once. Technically CSS allows an unlimited number of comma-separated shadows, but in practice, real-world effects rarely benefit from more than two or three: each added layer increases the browser's paint cost (box-shadow, especially blurred, is one of the more expensive properties to repaint on scroll or hover), and visually, stacking beyond three or four layers tends to produce diminishing, hard-to-perceive differences rather than more realistic depth.
Frequently Asked Questions
What's the actual difference between blur and spread?
Spread grows or shrinks the shadow's underlying rectangle by a fixed amount with hard edges. Blur then softens whatever edges that shape has into a gradient, without changing its base size. Spread controls size, blur controls edge softness, they're independent controls.
Which shadow layer appears on top when I stack multiple layers?
Layer 1 always renders closest to the viewer, with each subsequent layer rendered further behind it. This tool preserves that CSS ordering exactly, so put your sharpest, darkest shadow as Layer 1 for the most realistic combined depth effect.
Why does the generated CSS use rgba() instead of a hex color?
Hex colors have no way to express partial transparency (unless you use an 8-digit hex, which this tool doesn't emit). Since each shadow layer has its own opacity slider, the tool combines the hex color and opacity percentage into an explicit rgba(r, g, b, a) value to make the transparency visible in the output.
What does the Inset checkbox do?
It flips the shadow from casting outward (as if lit from behind the element) to casting inward, making the element look recessed or pressed in. This is the standard technique for pressed-button and focused-input visual states.
Why is this tool limited to four shadow layers?
While CSS technically supports unlimited comma-separated shadows, more than three or four layers rarely produces a visibly different effect and adds unnecessary paint cost for the browser, especially on hover or scroll-triggered shadows. Four layers covers essentially every realistic depth effect.
Can I use a negative spread value?
Yes, the spread slider goes from -50px to 50px. A negative spread shrinks the shadow's shape smaller than the element itself, which is useful for subtle shadows that shouldn't bleed out past the element's edges, especially when combined with a larger blur radius.