CSS Box-Shadow Generator
Visual box-shadow generator with multi-layer support, X/Y/blur/spread/color/opacity controls, live preview, presets (Subtle, Card, Modal, Neon, Neumorphism), and copy-paste CSS output.
CSS Box Shadow Generator
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
How to use the Box Shadow Generator
Start with a preset or blank layer
Quick start: click any preset (Subtle, Card, Modal, Neon, Neumorphism). Or modify the default 2-layer Card shadow. Each layer has X/Y offset, blur radius, spread radius, color, opacity, and optional inset (inner shadow) toggle.
Stack multiple layers for realistic depth
Convincing shadows usually use 2-3 layers: one tight + dark close to the element, one softer + lighter further out. Material Design builds every elevation from three. Add layers via "+ Add shadow layer"; each gets its own controls.
Use inset for inner shadows
Toggle "Inset" to make a shadow appear inside the element instead of outside. Useful for: pressed-button states, inset borders, neumorphic depth effects. Combine outer + inner shadows in the same stack for advanced effects.
Copy the CSS
Click "Copy CSS" to copy the full box-shadow: declaration. Paste into your stylesheet. Compatible with all modern browsers (IE9+). For maximum browser compatibility, the output uses RGBA colours which work everywhere.
CSS box-shadow — depth + hierarchy in a single property
CSS box-shadow is the standard way to give a web element visual depth. Material Design (Google's design system) defines depth as a hierarchy: surfaces sit at distinct elevations, each with its own shadow. The CSS property syntax is simple — offset-x, offset-y, blur, spread, color, optional inset — but creating shadows that LOOK real (not flat, not over-the-top) requires layering. A single shadow rarely looks right; 2-3 stacked layers with varying opacity + blur produce the diffuse light-source effect that matches reality. This tool gives you the visual editor + presets you need without memorising syntax.
Anatomy of a realistic shadow
Real shadows in nature have multiple light sources + ambient bounce light. A single light source produces a hard-edge shadow with no depth gradient. Multiple sources blur the edges + add subtle layering. To replicate this in CSS, stack 2-3 layers: (1) Tight + dark: small offset, small blur, higher opacity (~10-15%); creates the "near contact" shadow. (2) Mid-range: larger offset (10-20px), moderate blur (20-40px), medium opacity (~5-8%); creates the main shadow. (3) Wide + soft: large offset (30-50px), large blur (60-100px), low opacity (~2-4%); creates the ambient diffuse halo. Material Design's elevation system formalises this: in Material Components Web each of the 25 elevation levels (0-24) is three shadows — an umbra at 20% opacity, a penumbra at 14% and an ambient at 12%.
Single-layer shadows rarely look real. Material Design's elevation shadows are three layers each — umbra, penumbra and ambient — which the eye reads as natural depth; a single shadow feels flat or harsh.
The neumorphism + glassmorphism trends
Two recent design trends rely heavily on advanced box-shadow techniques. Neumorphism (popular around 2020): creates "soft UI" that appears to be raised from or pressed into a background of identical color. Achieved by stacking a light shadow (-x, -y, soft, white-ish) with a dark shadow (+x, +y, soft, dark-ish). The "neumorphism" preset in this tool demonstrates the technique. Glassmorphism (popular around 2021): combines backdrop-filter blur with subtle box-shadows + transparent backgrounds to create frosted-glass surfaces. Box-shadow contributes the depth; backdrop-filter contributes the blur. Both trends produce visually striking effects but should be used sparingly + with accessibility considerations (low contrast can hurt legibility).
Practical considerations
(1) Performance: a blurred shadow is expensive to paint, and animating box-shadow repaints it every frame — web.dev advises animating only transform and opacity, so fade a pre-drawn shadow on a pseudo-element instead. On mid-range phones, keep layers few. (2) Screen readers ignore shadows — never rely solely on them for hierarchy. (3) Dark mode: shadows on dark backgrounds need much higher opacity (often 30-50%) than on light. Plan separate dark-mode shadow values.
Layering shadows, Material elevation, and why dark mode needs more opacity
Syntax: box-shadow: x y blur spread color [inset];. Multi-layer: separate by commas.
Realistic shadows use 2-3 layers: tight+dark close, mid-range main, wide+soft halo.
Material Design elevation is three shadows per level — umbra 20%, penumbra 14%, ambient 12% opacity — across levels 0 to 24.
Inset shadows appear inside the element. Useful for pressed-button states + neumorphism.
RGBA colours let you control shadow opacity precisely. 5-15% opacity for subtle; 25%+ for dramatic.
Spread grows/shrinks the shadow size beyond blur. Positive = grows; negative = shrinks (useful for tight stacks).
Animating box-shadow repaints every frame; animate the opacity of a pseudo-element carrying the shadow instead.
Dark mode shadows need higher opacity (30-50%) than light mode (5-15%) to be visible.
Neumorphism uses paired light + dark shadows for "soft UI" depth effects.
Shadows are ignored by screen readers — never use one as the sole hierarchy signal.
Frequently Asked Questions
-
Real-world shadows have continuous gradients from dark-tight to soft-diffuse. A single CSS shadow produces a uniform blur — looks like a stuck-on overlay rather than natural light. Stacking 2-3 layers with varying offsets, blurs, and opacities reproduces the continuous gradient. Material Design formalises this with three shadows per elevation level. Start with the "Card" preset and observe the difference vs "Subtle" (single layer).
-
For depth effects INSIDE an element. Common uses: (1) Pressed button states: inset shadow makes button look "pushed in" on :active. (2) Neumorphism pressed/raised effects: inset = pressed-in; offset outer shadow = raised. (3) Inset borders + glow: e.g., inset focus rings, embossed text effect. (4) Faux inner padding: inset shadow with light color creates a "frame" effect. Combine outer + inner shadows in the same stack for advanced multi-state designs.
-
Blur: how soft/diffuse the shadow edge is. 0 = hard edge; 10+ = soft fade. Spread: how much larger/smaller the shadow is than the element. Positive = grows beyond element; negative = shrinks inside element edges. Common usage: blur 4-20px for typical shadows; spread −2 to 0 for tight stacks; spread positive for "glow" effects. Negative spread is useful when stacking shadows: prevents the inner shadow from extending beyond the outer one.
-
No. Box-shadow is rendered outside the element's box but doesn't add to layout dimensions. Adjacent elements + parents don't reflow to accommodate. Implication: shadows can overlap neighbouring elements — sometimes desired (cards floating over content) sometimes problematic (overlap with adjacent cards). Adjust margins to compensate when needed.
-
The syntax takes any number of comma-separated layers; painting cost is what limits them, and it grows with every layer and every pixel of blur. Most designs only need 2-3 layers — beyond that, marginal visual improvement is small. Don't stack 10 layers to mimic a single drop shadow; one well-tuned shadow with proper blur + opacity is usually enough.
-
box-shadow: applies to the element's rectangular/rounded-rectangular box. Best for cards, buttons, modals. filter: drop-shadow(): applies to the rendered visible shape, including transparent PNG edges, SVG outlines, text. Best for icons, logos, irregular shapes. Tip: use box-shadow by default; switch to drop-shadow only when the element has transparent regions you want to shape the shadow around.
-
Neumorphism = "new skeuomorphism" — soft UI that appears extruded from a background of identical colour. Achieved with paired light + dark shadows. Pros: visually distinctive, modern-looking, subtle depth. Cons: poor contrast hurts accessibility (WCAG often fails); requires homogeneous background colours; doesn't work well for buttons (low affordance — users don't know they're clickable). Verdict: use sparingly for non-interactive surfaces (cards, panels); avoid for primary CTAs + critical interactions.
-
Black/dark shadows on dark backgrounds are nearly invisible — defeats the purpose. Three options: (1) Higher opacity dark shadows (30-50% vs 5-15% in light mode) — still works on dark bg. (2) White/light shadows with lower opacity (5-10%) — creates a glow effect from above. (3) Border + shadow combination — border for visible edge, shadow for depth cue. Most design systems define separate shadow tokens per mode; use CSS variables with prefers-color-scheme: light/dark to switch.
-
Layer configurations save to your browser's localStorage so they persist between sessions on the same device. Nothing leaves your browser — open DevTools → Network and confirm zero outbound requests. Safe for confidential design work.
-
Pair with: CSS Gradient Generator for background gradients; CSS Clip-Path Generator for shape clipping; Type Scale Calculator for typography. External: Material Design's elevation guidance for reference values.
Method & sources
How it computes
Each layer's x and y offset, blur, spread, colour, opacity and inset flag become one comma-separated box-shadow value (colour as rgba). Seven presets, from a one-layer Subtle to paired-shadow Neumorphism; layers persist in localStorage on your device.
What this tool implements
- Material Components Web builds each of its 25 elevation levels (0-24) from three shadows — umbra 20%, penumbra 14%, ambient 12% opacity — the page had credited Material Design and Apple HIG with "2-3 layer stacks".
- web.dev: animate transform and opacity; a blurred shadow is expensive to paint — the page had called box-shadow GPU-accelerated and cheap to animate.
- Its cross-links gave the gradient generator and the type-scale calculator the wrong tool IDs; they are now links.
Sources
- Material Components for the Web. mdc-elevation _elevation-theme.scss (umbra, penumbra and ambient maps). https://github.com/material-components/material-components-web/bl…
- web.dev. How to create high-performance CSS animations. https://web.dev/articles/animations-guide
Pick up where you left off
Stored only in this browser — never sent to our servers.