CSS box-shadow. Multi-layer · inset · glow · neumorphism.
🌑 Preview
📦 Shadow Card

How to use

  1. Pick style (7 presets).
  2. Adjust X/Y offset, blur, spread.
  3. Set shadow color and opacity.
  4. Copy CSS.

Key features

  • 7 preset styles
  • X/Y ±40 px, blur 0–80 px, spread ±20–40 px
  • Shadow color + opacity
  • Inset, glow, neumorphism auto-generated
  • Layered multi-shadow for max depth

Use cases

  • Card UI — Material Design, modals, popups
  • Button hover — lift effect
  • Image galleries — photo depth
  • Form inputs — focus glow
  • Neumorphism UI — dual-side soft depth

Mastering box-shadow

Syntax: `box-shadow: X Y BLUR SPREAD COLOR;` (use `inset` for inner shadow). (1) Y positive, X zero mimics sunlight from above. (2) BLUR ≥ Y for soft shadows; BLUR < Y for sharp. (3) SPREAD grows/shrinks the shadow area itself. (4) Comma-separate multiple shadows for layered depth — closer to real light (Material Design Elevation system).

FAQ

vs filter:drop-shadow?

`box-shadow` follows the box; `filter:drop-shadow` follows the alpha mask (works on transparent PNGs).

Performance?

Large blur (>40 px) + multi-layer hurts mobile performance, especially with transform animations.

Dark mode?

On dark backgrounds, deepen shadow color or increase opacity. Or use a white glow.

Free?

Yes.