CSS Box Shadow Generator
Create and preview CSS box-shadow values with live sliders for offset, blur, spread, color, and opacity.
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.25);
Ad · 728×90
Frequently Asked Questions
What do the box-shadow values mean?
In order: horizontal offset, vertical offset, blur radius, spread radius, and color. Negative spread shrinks the shadow; inset draws it inside the element.
How do I make a soft, modern shadow?
Use a small vertical offset, a large blur, a slightly negative spread, and low opacity — for example 0px 8px 24px -4px at 25% opacity.
Can I layer multiple shadows?
Yes. CSS accepts comma-separated shadow lists. Generate each layer here and combine them in one box-shadow declaration.
More free tools
- CSV to JSON — Convert CSV data to JSON instantly. Paste and go.
- JSON Formatter — Prettify and validate JSON with syntax highlighting.
- Base64 Encoder — Encode and decode Base64 — two-way, live.
- YAML to JSON — Convert YAML config files to JSON.
- Character Counter — Count characters per platform — Twitter, LinkedIn, meta tags.
- Text Case Converter — camelCase, snake_case, UPPER, Title Case and more.
- Slug Generator — Turn any title into a clean URL-safe slug.
- Line Sorter — Sort, deduplicate, or reverse lines of text.
- CSS Gradient Generator — Build linear and radial gradients visually.
- Color Contrast Checker — Check WCAG AA/AAA compliance for text colors.
- SVG Optimizer — Minify SVG files. Removes metadata and unused elements.
- SVG to PNG — Export SVG to PNG at any resolution, in browser.
- Favicon Generator — Create ICO and PNG favicons from any SVG or image.