All tools · 🎨 Design
🎨 CSS Box Shadow Generator
Build a box-shadow visually. Adjust offset, blur, spread, and color with live preview. Copy the final CSS rule with one click.
Loading tool…
Examples
Subtle card shadow
Output
box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);Dramatic lift
Output
box-shadow: 0 20px 40px rgba(0,0,0,0.15);Inset shadow (pressed)
Output
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);Frequently asked questions
What is the difference between blur and spread?
Blur softens the edge of the shadow (higher = softer). Spread grows or shrinks the shadow before blurring (positive = larger, negative = inset-like).
Can I stack multiple shadows?
Yes. Separate with commas. Two or three layered shadows often look more realistic than one.
How do I do an outer glow?
Zero offset, large blur, low-alpha bright color: box-shadow: 0 0 20px rgba(255,200,0,0.8);
About this tool
CSS Box Shadow Generator runs entirely in your browser using standard Web APIs. No data is sent to any server. The source for this tool is in our public GitHub repository.
Related tools
- 🌈 CSS Gradient Generator — Build linear and radial CSS gradients with live preview. Copy the CSS.
- 🟫 Border Radius Generator — Generate CSS border-radius with per-corner control. Live preview.
- 🎛️ CSS Filter Generator — Combine blur, brightness, contrast, grayscale, sepia, hue-rotate, drop-shadow.
Why this tool
vs typical free web-tool sites
| 1vw | Typical free site | |
|---|---|---|
| Price | Free | Free |
| Signup required | No | Often (for premium features) |
| Ads inside the tool | No | Yes (banner + video) |
| Data sent to server | No (browser-only) | Yes (inputs analyzed for ads) |
| Total tools | 96 | Often <20 or scattered across sites |
| Bookmarkable URL per tool | Yes | Mixed |
| Loads in under 1s | Yes (static) | Often slow (ad tracking) |
| Multilingual | EN / ES / PT / FR / DE | Usually EN only |
| Open source | Yes | No |