CSS box-shadow generator
This tool builds a CSS box-shadow visually and gives you the exact value to paste into your stylesheet. It is for developers styling buttons, cards, modals and inputs who want a precise shadow without trial-and-error. The live preview shows the shadow on a sample box as you adjust each control.
How it works
The box-shadow property follows the order [inset] offset-x offset-y blur-radius spread-radius colour. The generator reads your sliders and assembles that string: offset X and Y position the shadow, blur softens its edge, and spread expands (positive) or contracts (negative) it. Your hex colour and opacity slider are combined into an rgba() value so the shadow can be semi-transparent, and ticking inset prepends the inset keyword to draw the shadow inside the element.
Example
With offset X = 0px, offset Y = 8px, blur = 24px, spread = -4px, colour #0f172a and opacity 25%, the tool outputs:
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.25);That is a soft, downward elevation shadow typical of cards. Tick inset and it becomes inset 0px 8px 24px -4px rgba(15, 23, 42, 0.25), an inner shadow instead.
| Effect | Offset Y | Blur | Spread |
|---|---|---|---|
| Subtle card | 4px | 12px | 0px |
| Floating elevation | 8px | 24px | -4px |
| Hard drop shadow | 6px | 0px | 0px |
| Pressed (inset) | 2px | 6px | 0px |
Understanding each parameter
Offset X and Y set the direction. A purely downward shadow (X = 0, Y positive) reads as overhead light. An X offset to the right and Y offset down creates a directional light from the top-left, which matches many design systems. Negative offsets move the shadow in the opposite direction.
Blur radius controls softness. Zero blur produces a hard-edged silhouette — useful for a retro cutout look, or for precise inset borders. Large blur values (20px or more) create the soft, diffuse shadows common in elevation systems. The blur cannot be negative.
Spread radius is the least intuitive parameter. Positive spread grows the shadow bigger than the element’s own box, so it peeks out from all sides even before any offset. Negative spread shrinks it; a shadow with -4px spread plus 8px Y offset appears to tuck tightly beneath the element rather than spilling wide around it — this is what produces the narrow-base, floating-card look.
Opacity controls how transparent the shadow colour is. Low opacity (10–20%) produces shadows that read as neutral on most backgrounds; full opacity creates harsh, ink-like shadows. Because the tool converts your hex to rgba(), the shadow remains properly transparent and composes naturally with any background.
Stacking multiple shadows
CSS allows a comma-separated list of shadows on one box-shadow declaration, applied from the front layer (first) to the back layer (last). A two-layer shadow technique produces more realistic depth: a tight close shadow for the immediate edge, and a wide diffuse shadow for ambient light scatter. For example:
box-shadow:
0 2px 4px rgba(0,0,0,0.12),
0 8px 24px rgba(0,0,0,0.08);Generate each layer in this tool, then join them with a comma in your stylesheet.
The shadow value is generated locally in your browser — nothing is uploaded.