CSS Box Shadow Generator

Static shadows are cheap, paint once and forget. The cost shows up when you animate the box-shadow property itself, because every frame triggers a repaint, and large blur radii make each repaint slower. The standard trick: put the bigger shadow on a ::after pseudo-element with opacity: 0 and transition the opacity to 1 on hover. Opacity changes are GPU-composited, so the hover stays at 60fps even with heavy shadows.

X / Y offset: shadow position relative to element. Positive Y = below, negative Y = above. Blur: how soft the shadow edges are. 0 = hard edge; higher = softer/larger. Spread: how much the shadow extends beyond the element’s size. Positive grows it; negative shrinks. Color: any CSS color, including rgba for transparency.

Material Design defines 5 “elevation” levels for stacking depth: 1 (subtle, like cards) → 5 (modal dialogs, alerts). Each combines 2 box-shadows: a smaller key shadow + a larger ambient shadow. The combination feels more realistic than a single shadow.

“New skeumorphism” – a soft, 3D-looking UI style with low-contrast shadows. Typically uses 2 shadows: one dark, one light, on opposite sides – making elements look pressed into or emerging from the background. Works best on solid neutral backgrounds (no images behind). Soft variant: outset; inset variant: inset both shadows for a “pressed in” feel.

“Glass” effect with a frosted/translucent panel look. Box-shadow contributes a deep, slightly-tinted blue/purple shadow under a panel. Combine with backdrop-filter: blur(10px) and a semi-transparent background for the full glass effect (not auto-applied here – add manually).

Toggle the Inset checkbox on a shadow. Inset shadows render inside the element border, creating a “carved” or “pressed in” effect. You can combine inset + outset on the same element (separate shadow entries) for unique 3D effects.

Yes, natively. Click “+ Add shadow” to add another layer. The output combines them with commas: box-shadow: shadow1, shadow2, shadow3;.

Compact: all shadows on one line. Best for single-shadow or 2-shadow cases. Expanded: each shadow on its own line, indented, with comments. Best for 3+ shadows where the compact form gets unreadable.

Real shadows are rarely fully opaque. Black with 20-30% alpha (rgba(0,0,0,0.25)) looks like a natural drop shadow. Using #000 (full opacity) makes shadows look “stamped on” and unrealistic. The tool defaults to rgba; for hex colors, use a hex with 8 digits like #0000004D (last 2 = alpha hex).

No. The CSS is generated entirely in your browser with JavaScript – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.