Free tool No sign-up
CSS Box Shadow Generator
Build CSS box shadows visually — adjust blur, spread, offset, colour and opacity with live preview, then copy the output.
box-shadowshadowcssgeneratoreffects
How to use
01
Adjust the sliders
Drag Offset X/Y to position the shadow, Blur to soften edges, and Spread to grow or shrink it.
02
Pick a colour
Open the colour picker to choose any shadow hue, then set its opacity from 0–100%.
03
Toggle inset
Flip the toggle to switch between an outer drop shadow and an inner cut-in shadow.
04
Stack layers
Click "Add Layer" to combine multiple shadows. Layered shadows create realistic depth.
05
Try a preset
One click applies a ready-made configuration — Soft, Float, Glow, Layered and more.
06
Copy the CSS
Hit "Copy CSS" to grab the output and paste it directly into your stylesheet.
CSS box-shadow syntax
Basic
box-shadow: offset-x offset-y blur spread color;
Inset
box-shadow: inset offset-x offset-y blur spread color;
Multiple
box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.12), 0 16px 32px rgba(0,0,0,0.10);
| Property | Description |
|---|---|
offset-x | Horizontal distance — positive moves right, negative moves left. |
offset-y | Vertical distance — positive moves down, negative moves up. |
blur-radius | Higher = softer edge. 0 = sharp, hard shadow. |
spread-radius | Grows (+) or shrinks (−) the shadow size before blur. |
color | Any CSS colour — use rgba() for transparent shadows. |
inset | Optional keyword. Turns the shadow inward (inner shadow). |
Browser support
box-shadow is supported in every modern browser and has been since IE 9 — safe to use anywhere without a fallback.
🟢 Chrome v10+
🟢 Firefox v4+
🟢 Safari v5.1+
🟢 Edge v12+
🟡 IE v9+