CSS Box Shadow Generator (Multi-layer)

What is Box Shadow?

CSS box-shadow adds depth to elements — useful for hierarchy and visual separation. Syntax:

box-shadow: <offset-x> <offset-y> <blur> <spread> <color>;

• offset-x / offset-y: shift the shadow along X/Y. Positive = right/down.
• blur: blur radius. 0 = sharp, larger = softer.
• spread: shadow size. Negative shrinks the shadow.
• color: typically rgba(0,0,0,0.1) to keep transparency.
• inset: prepend inset to make the shadow inside.

Multi-layer shadows

Beautiful shadows like Material Design or Neumorphic come from stacking layers. Separate them with commas:

box-shadow:
  0 1px 3px rgba(0,0,0,0.12),
  0 1px 2px rgba(0,0,0,0.24);

The close layer (small blur, darker) gives a crisp edge. The far layer (large blur, softer) adds depth. The tool ships with 8 presets — pick one and tweak.

When to use which style

• Material Design: two compact layers — great for Android and modern web apps.
• Neumorphic: one dark shadow + one light shadow opposite each other — soft, raised UI.
• Inset: input fields, pressed buttons — looks recessed.
• Glow: notifications, focus rings — bold color, large blur.
• XL shadow: modals, dropdowns — clearly lift off the background.

Performance tip

Box shadows with large blur are GPU-heavy when animating. For hover effects, use transform instead of shifting the shadow. Or apply will-change: box-shadow so the browser pre-renders.

Related

• Gradient Generator — build beautiful backgrounds
• Color Picker — pick a shadow color
• CSS Unit Converter — px ↔ rem
• All tools