Design Tools
CSS Box Shadow Generator
Build complex multi-layer box-shadows with live preview. Material Design + Neumorphism presets included.
Box style
Shadow layers (1)
Layer 1
X: 0px
Y: 4px
Blur: 8px
Spread: 0px
box-shadow: 0px 4px 8px 0px #00000033;
Build perfect shadows
Most CSS shadows are over-shadowed. Real depth comes from layering 2-3 shadows: a tight, sharp one for the contact point + a wider, softer one for ambient light. Try our Material presets — they use that pattern.
Frequently Asked Questions
What do the box-shadow values mean?▾
box-shadow: [x-offset] [y-offset] [blur] [spread] [color]. X/Y move the shadow horizontally/vertically. Blur softens the edge (higher = softer). Spread expands or contracts the shadow size. Inset makes it appear inside the element instead of outside.
Can I stack multiple shadows?▾
Yes — comma-separate them in the same box-shadow value. Stacking is how you create realistic depth (multiple light sources, ambient + directional) and effects like neumorphism (light + dark inset shadows side by side).
What is neumorphism?▾
Soft UI style where elements appear to extrude from or sink into the background. Achieved with two shadows: a light one offset to the top-left and a dark one offset to the bottom-right (or inverted for "pressed" state). Looks great in moderation; can hurt accessibility if overused.
How does box-shadow affect performance?▾
Heavy shadows (large blur, multiple layers) hit the GPU harder than other CSS effects. For animations, prefer `filter: drop-shadow()` — it composites better. For static UI, box-shadow is fine until you have hundreds of shadowed elements on screen.
How do I make the shadow only on one side?▾
Use a negative spread to hide the unwanted sides. Example: `box-shadow: 0 8px 8px -4px rgba(0,0,0,0.2)` shows only a bottom shadow. Or stack 4 single-direction shadows with positive offsets.