CSS Box Shadow Generator: A Visual Guide (2026)

Shadows are how interfaces communicate depth. A well-placed shadow tells users this card floats above the page or this button is pressed. But the CSS box-shadow syntax has five values, and getting them right by guessing is frustrating.

Our Box Shadow Generator lets you dial in shadows with sliders and a live preview, then copy clean CSS.

Anatomy of box-shadow

box-shadow: 10px 10px 20px 0px rgba(30, 41, 59, 0.25);
/*          │     │     │    │   └─ color (with opacity) */
/*          │     │     │    └────── spread radius        */
/*          │     │     └─────────── blur radius          */
/*          │     └───────────────── vertical offset      */
/*          └─────────────────────── horizontal offset    */

Horizontal & Vertical Offset

How far the shadow shifts right/down (positive) or left/up (negative). For a natural “light from above” look, use a small positive vertical offset and zero or small horizontal offset.

Blur Radius

Softens the shadow edges. 0 is a hard, crisp edge; larger values create a soft, diffuse glow. Most UI shadows use a blur larger than the offset.

Spread Radius

Grows (positive) or shrinks (negative) the shadow before it blurs. Negative spread is a handy trick for subtle, tucked-in shadows.

Color & Opacity

Use rgba() so the shadow blends with any background. Low-opacity dark shadows (rgba(0,0,0,0.1)) look far more natural than solid black.

Inset Shadows

Add the inset keyword to push the shadow inside the element:

box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);

This is perfect for pressed buttons, input fields, and inner glows. Toggle the Inset checkbox in our Box Shadow Generator to try it.

Layering Multiple Shadows

Real-world elevation rarely uses a single shadow. Stack several—separated by commas—to mimic how light actually falls:

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.06),
  0 4px 12px rgba(0, 0, 0, 0.10);

A tight, dark shadow grounds the element; a larger, softer one suggests ambient light. Generate each layer individually, then combine the values.

Design Tips for Better Shadows

• Keep light consistent. Pick one light direction (usually top) and use it everywhere.
• Tint your shadows. Pure black looks muddy. A shadow tinted toward your background or brand color feels more intentional.
• Bigger elements, bigger shadows. A modal needs more blur and offset than a small button.
• Subtle wins. Low opacity and gentle blur read as “premium.” Harsh shadows look dated.
• Respect dark mode. Shadows are nearly invisible on dark backgrounds—lean on borders or subtle light glows instead.

Cross-Tool Workflow

• Box Shadow Generator → Build and preview shadows visually
• Color Converter → Pick shadow tints in HEX, RGB, or HSL
• CSS Minifier → Compress your final stylesheet for production
• HTML Beautifier → Tidy up the markup your shadows sit on

---

Frequently Asked Questions

Q: What does each value in box-shadow mean?

A: In order: horizontal offset, vertical offset, blur radius, spread radius, and color. An optional inset keyword draws the shadow inside the element. Our Box Shadow Generator exposes each as a slider with a live preview.

Q: How do I make an inner (inset) shadow?

A: Add the inset keyword before the values, e.g. box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);. In our Box Shadow Generator, simply check the “Inset” box.

Q: What’s the difference between blur and spread?

A: Blur softens the shadow’s edges—higher values look fuzzier. Spread changes the shadow’s size before blurring; positive spread enlarges it, negative spread shrinks it. They’re often combined for fine control.

Q: How do I add more than one shadow?

A: Separate multiple shadows with commas in a single box-shadow declaration. Layering a tight dark shadow with a larger soft one creates realistic depth. Generate each, then combine them in your CSS.

Q: Why do my shadows look harsh?

A: Usually the color is too opaque or the blur is too low. Try a lower opacity (around 0.1–0.2) and a blur radius larger than your offset for a softer, more natural result.

---

Design Beautiful Shadows in Seconds

Stop guessing at pixel values. Adjust the sliders, watch the live preview, and copy production-ready CSS from our Box Shadow Generator—no sign-up, no uploads, just clean code.

Explore all free developer tools at Hasare.

---

Want UI that feels like it has real depth? Craft the perfect elevation with our Box Shadow Generator.