Box Shadow Generator

01 Box Shadow Anatomy

02 Professional Shadow Techniques

• ✨
  Smooth Shadow Falloff Avoid "sticker" looks by using multiple layers with extremely low opacity (0.05 - 0.1) and increasing blur radii.
• 📏
  Negative Spread Trick Use a negative spread to shrink the shadow's footprint, anchoring the elevation effect directly beneath the element.
• ⚡
  Performance Guardrails Large blurs trigger expensive paint operations. For animations, consider will-change: transform to move shadows to GPU layers.

03 Shadows in Production Design Systems

Shadows are not decoration, they are spatial language. Mature design systems codify elevation as a small set of named tokens, then enforce them everywhere. Here is how shadows actually show up in shipping product code.

• 🪜
  Elevation Tokens (Material's 0/1/2/4/8/16/24dp Scale) Material Design 3 defines six elevation levels mapped to dp values. Each level is a layered shadow recipe, an ambient shadow plus a directional key-light shadow. Pick a level for a component (Card = 1dp, Menu = 8dp, Dialog = 24dp) and never write a one-off shadow.
• 🎯
  Focus Rings as box-shadow, not outline CSS outline ignores border-radius on older browsers and renders as a sharp rectangle around rounded buttons. Using box-shadow: 0 0 0 3px hsl(217 91% 60% / 0.5) for focus produces a ring that follows the corner curve. Tailwind's ring-* utilities are literally box-shadows underneath.
• 🌙
  Dark-Mode Shadow Tweaks Pure black shadows disappear on dark backgrounds. Mature systems either drop shadow opacity entirely (Stripe, Linear) or use a saturated-color shadow, hsla(220, 60%, 4%, 0.5) instead of hsla(0, 0%, 0%, 0.2). Use a CSS variable per theme so the same component picks the right recipe automatically.
• 📥
  Inset Shadows for Recessed UI Pressed-button states, depressed input wells, and toggle tracks all use the inset keyword. A subtle inset 0 2px 4px rgba(0,0,0,0.06) on an input gives keyboard users a clear well to type into without adding a border.
• 🎨
  Tinted Shadows for Colored Surfaces A blue card with a neutral-gray shadow looks dirty. Tint the shadow with the surface's own hue at low saturation and high darkness, the shadow reads as a deeper version of the card, not a smudge underneath it.

04 Worked Examples

/* Naive (wrong), a single layer reads like a flat sticker */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);

box-shadow:
  0 5px 5px -3px rgba(0, 0, 0, 0.20),  /* key light, sharp, close /
  0 8px 10px  1px rgba(0, 0, 0, 0.14), / ambient mid /
  0 3px 14px  2px rgba(0, 0, 0, 0.12); / ambient diffuse /

background: hsl(220, 60%, 50%);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); / dirty grey halo */

background: hsl(220, 60%, 50%);
box-shadow: 0 8px 24px hsla(220, 60%, 30%, 0.18);

.btn {
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
}

.btn:active {
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.12);
  transform: translateY(1px);
}

05 Related Tools

Shadows rarely ship alone. They live next to radius, gradients, filters, and motion. These companion tools pair naturally with the box-shadow generator when you are dialing in a card or elevated surface.