Build single & multi-layer shadows with live preview
CSS Box Shadow Generator creates and previews CSS box-shadow declarations visually. Adjust the horizontal offset, vertical offset, blur radius, spread radius, and color using sliders and a color picker — the live preview updates in real time, and the generated CSS code is ready to copy. It also supports multiple stacked shadows and inset shadows.
The CSS box-shadow property takes four length values and a color: box-shadow: h-offset v-offset blur spread color. Positive h-offset moves the shadow right; negative moves left. Positive v-offset moves the shadow down; negative moves up. Blur radius controls feathering (0 = sharp edges). Spread radius expands or shrinks the shadow beyond the element's size. Adding inset moves the shadow inside the element.
Design applications: neumorphism (multiple soft inset + outset shadows), material design elevation (subtle bottom shadow), card depth effects, focus rings for accessibility, and glow effects (use color with high transparency and large spread). Complex shadow effects layer multiple box-shadow values with comma separation — this generator handles unlimited stacked shadows.
Basic card drop shadow
Result: box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
Neumorphic button (light theme)
Result: box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff
Focus ring (accessibility)
Result: box-shadow: 0 0 0 3px rgba(59,130,246,0.5) — 3px solid blue ring, no layout shift
What is the difference between blur and spread in box-shadow?
Blur radius controls how fuzzy the shadow edges are — 0 gives sharp edges, higher values give soft, feathered edges. Spread radius expands (positive) or shrinks (negative) the shadow's base size before blurring. A spread of -4px with 4px blur creates a sharp 'shadow only below' effect common in card UI.
How do I create an inset shadow?
Add the inset keyword before the other values: box-shadow: inset 0 2px 4px rgba(0,0,0,0.1). This places the shadow inside the element's border box, useful for pressed button states, inner borders, or sunken fields. Inset shadows do not affect layout.
Can I stack multiple box shadows?
Yes — comma-separate multiple shadow declarations: box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.1). Shadows are rendered front to back (first listed is on top). Stacking is used for layered depth effects, glow + drop shadow combinations, and neumorphism (one light, one dark shadow).
What is neumorphism and how do I create it?
Neumorphism is a design trend using two shadows — one light (top-left) and one dark (bottom-right) — on a background that matches the element's color. Example: box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff on a #e0e0e0 background. The element appears to 'press out' of the surface. Inset versions create a 'pressed' effect.
Does box-shadow affect layout or performance?
box-shadow does not affect layout — it's purely visual and does not change the element's bounding box (unlike border or padding). For performance: box-shadow triggers a repaint (not reflow) when it changes. For animations, consider filter: drop-shadow() instead — it's GPU-composited and doesn't trigger repaint. box-shadow is off the main thread only if the element is promoted to its own compositing layer.