CSS Box Shadow Generator

Box-shadow in 2026 — anatomy, layered shadows, and the design-system patterns that ship

The box-shadow property is one of the oldest CSS3 features — yet good shadows still distinguish a polished interface from one that looks like a wireframe. This guide unpacks the syntax (each of the four numeric values does something specific), the physics-aware patterns Google's Material team and Apple's Human Interface team use to build elevation systems, the new filter: drop-shadow() alternative for irregular shapes, and the performance pitfalls that cause shadow-heavy pages to drop frames during scroll.

The four numbers — what each value actually does

The full box-shadow grammar from CSS Backgrounds and Borders Module Level 3:

box-shadow: [inset?] <offset-x> <offset-y> [blur-radius] [spread-radius] [color];

The blur and spread interact in non-obvious ways. A 24 px blur with 0 spread creates a 24-pixel-wide gradient on each edge. A −12 px spread with a 24 px blur shrinks the source rectangle first, so you only see the right half of the gradient — useful for tight inner-glow effects.

Layered shadows — why the best shadows are three shadows

Real-world shadows are not a single blur. A pen on a desk in a sunlit room casts:

1. A contact shadow — sharp, dark, right under the object.
2. A key shadow — a softer mid-distance shadow from the dominant light source.
3. An ambient shadow — a wide, very soft shadow from indirect light bouncing around the room.

Material Design and Apple's HIG both encode this in their elevation systems. A typical 8-dp Material card:

box-shadow:
  0  1px  2px rgba(0,0,0,.10),  /* contact */
  0  4px  8px rgba(0,0,0,.08),  /* key */
  0 12px 24px rgba(0,0,0,.06);  /* ambient */

The pattern is: progressively bigger offset and blur, progressively lower opacity. Designers call the result "smell of money" — UIs that feel premium without anyone being able to articulate why.

Material Design elevation, in CSS form

The Material 3 elevation tokens, translated to CSS box-shadow:

Neumorphism — the two-light pattern

Soft-UI / neumorphic surfaces look extruded out of the background. The trick: two opposing shadows, one lighter than the surface, one darker.

background: #e0e5ec;
box-shadow:
  9px  9px 18px #a3b1c6,    /* darker, bottom-right */
 -9px -9px 18px #ffffff;    /* lighter, top-left */

Neumorphism died as a mainstream trend around 2022, partly because the low-contrast aesthetic is an accessibility nightmare. Use it for marketing pages and design portfolios where contrast is decorative; do not ship it in transactional UI.

Inner shadows for inputs, pressed buttons, and depth

The inset keyword paints the shadow inside the box. Use cases:

• Pressed button state: a small inset shadow at the top creates a "pushed in" feel.
• Form field focus: a soft inset glow draws the eye without changing layout.
• Inset highlight on a card: inset 0 1px 0 rgba(255,255,255,.15) across the top edge mimics a subtle bevel.
• Recessed input: inset 0 2px 4px rgba(0,0,0,.06) makes the field feel carved into the surface.

box-shadow vs filter: drop-shadow() — when to use each

Performance — the shadow trap that drops frames

Box-shadows are GPU-accelerated, but each shadow layer creates a paint area equal to the element rectangle plus the shadow extent on every side. A 0 0 100px 100px shadow on a 200×200 box covers 600×600 pixels — nine times the original area. Multiply by stacked layers and you can blow out paint cost on weaker mobile GPUs.

The defensive habits:

• Animate opacity, not the shadow itself. Put the shadow on a pseudo-element and fade it in — much cheaper than recomposing blur.
• Use transform: translate3d(0,0,0) or will-change: transform on the parent to promote it to its own compositor layer.
• Avoid blur radii > 50 px on long lists. A list of 200 cards each with a 60 px shadow runs the GPU into the ground on scroll.
• Prefer one well-tuned shadow to five layered ones on hot paths (animations, scroll containers).
• Test on a low-end device. Chrome DevTools' "Performance → CPU 4x slowdown" surfaces shadow-paint costs you'll never see on an M-series Mac.

Common box-shadow mistakes

• Pure black at 100% opacity. Real shadows are tinted and translucent. Use rgba(17,24,39,.15) or similar; pure black looks like a stage prop.
• Forgetting the unit on 0. box-shadow: 0px 4px 12px black is fine; 0 4px 12px black is also valid (CSS lets you drop the unit on zero), but mixing styles in one codebase is messy.
• Using shadow for focus rings on inputs. Browsers expose :focus-visible and outline; users with custom OS contrast settings rely on outline. Replace it with a shadow only when you also re-add an accessible focus indicator.
• Animating box-shadow on every frame. Use opacity or transform-based hover effects.
• Inset shadow on a transparent element. Without a background color the shadow has nothing to paint over, so it appears to vanish.
• Forgetting that overflow:hidden clips the shadow. If a parent clips overflow, an outer box-shadow on a child gets cut off — the shadow paints outside the box.