box shadow generator

How to use the box shadow generator

  1. Adjust the six core values: offset-x, offset-y, blur, spread, color, opacity.
  2. Switch to multi-layer mode to stack multiple shadows for more realistic depth — top and bottom shadows, or multiple near + far shadows for smooth elevation.
  3. Use preset collections: Material Design elevation 1-24, Smooth Shadow (soft modern), Neumorphic (dual-direction), Long Shadow, Hard Shadow (retro).
  4. Toggle inset for inner shadows (pressed states, inner glow).
  5. Copy CSS — single box-shadow: declaration with comma-separated layers.

When to use it

Material elevation (1-24) — use for cards and floating UI that follow Material Design. Smooth shadow (soft, single direction) — modern SaaS, blogs, product pages. Neumorphic dual-direction — only on monochrome surfaces; matches the Neumorphism generator output. Hard shadow — retro/brutalist designs, bold CTA buttons. Inset — pressed buttons, inner shadows on form fields. Alternative: Tailwind's default shadow scale covers Material elevations 1-24 via shadow-sm through shadow-2xl; use this tool for custom tuning beyond the default scale.

Example

/* Material elevation 4 — card default */
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08); }

/* Smooth soft shadow for modern SaaS */
.modern {
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 4px 8px rgba(0,0,0,0.04),
    0 16px 32px rgba(0,0,0,0.04);
}

/* Pressed button (inset) */
.pressed { box-shadow: inset 0 2px 4px rgba(0,0,0,0.15); }

/* Retro hard shadow */
.retro { box-shadow: 4px 4px 0 0 #000; }

Frequently asked questions

What's the difference between blur and spread?
Blur controls softness (higher blur = softer, more diffuse shadow). Spread grows the shadow uniformly outward (like scaling the element before shadow is calculated). Most modern shadows use high blur + zero spread.
How do I stack shadows to look more realistic?
Combine a tight, low-opacity shadow close to the element with a wider, more diffuse shadow further out. Real shadows in physical light have this multi-layer quality — flat single shadows look CGI.
Why does my box-shadow affect layout?
Box-shadows don't affect layout — they're painted on top and don't take up space. If you're seeing layout shifts, check for outline or border instead.
Can I animate box-shadow?
Yes, but it's expensive because it forces repaint on every frame. For frequent animations (hover lifts), fake it with transform: translateY and a single static shadow.
How do I add a colored glow?
Use a colored shadow with high opacity close to the element: 0 0 20px rgba(59, 130, 246, 0.5) creates a blue glow.

Related generators

Last updated: 2026-04-23