CSS Box Shadow Generator
Visual box-shadow builder with multi-layer support, 9 presets (Material elevation, neumorphic, glassmorphic, glow), per-shadow controls. Free.
Design box shadows with multi-layer support (add as many shadows as you want), 9 presets including Material Design elevation, neumorphic, glassmorphic, glow effects. Per-shadow X/Y/blur/spread/color/alpha/inset controls.
Shadow layers
CSS
HTML
How to Use CSS Box Shadow Generator
- Pick a preset (Material 1-5 elevation, neumorphic, glassmorphic, glow, etc.) or start with the default single shadow.
- Adjust per-shadow controls: X/Y offset, blur (softness), spread (size beyond element), color, alpha, inset (inner shadow).
- Click + Add shadow to layer multiple shadows. Each gets its own controls. Click Remove on any to delete.
- Customize the preview: width / height / background color / border radius - test against your actual layout.
- Pick output style: compact (single-line) or expanded (one shadow per line, indented - easier to read for multi-layer shadows).
- Copy CSS, copy HTML, or download as
box-shadow.css.
Frequently Asked Questions
Do box shadows affect page performance?
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.
What’s the difference between box-shadow values?
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.
What’s a Material Design elevation?
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.
What’s neumorphism?
“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.
What’s glassmorphism?
“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).
How do I create an inner shadow?
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.
Can I combine multiple shadows?
Yes, natively. Click “+ Add shadow” to add another layer. The output combines them with commas: box-shadow: shadow1, shadow2, shadow3;.
What’s the difference between compact and expanded output?
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.
Why use rgba instead of named colors for shadows?
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).
Is anything uploaded?
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.