PXLTools

Box Shadow Generator

Design CSS box shadows visually

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.15);

How to use Box Shadow Generator

  1. Adjust offsets, blur, spread, and opacity to shape the shadow.
  2. Add multiple layers to stack shadows for more realistic depth.
  3. Toggle inset to draw the shadow inside the element.
  4. Try the presets for common effects like neumorphism, layered cards, or subtle elevation.
  5. Copy the generated CSS and paste into your stylesheet.

Box shadow design principles

Real-world shadows are soft, offset slightly, and rarely pitch black. The trick to natural-looking shadows is a low-alpha color (5-15% black) with generous blur relative to the offset. A common formula: blur ≈ 2× the y-offset.

Material Design, Apple's Human Interface Guidelines, and Tailwind CSS all use layered shadows — multiple stacked shadows create more depth than a single large one. Typically you pair a short, sharp shadow (near the element) with a longer, softer shadow (the ambient glow).

Neumorphism uses a light shadow on one side and a dark shadow on the opposite side of the same element, creating the illusion of a soft-extruded surface. It works best with monochromatic backgrounds and subtle color variations.

Frequently Asked Questions

What does each property do?
X offset moves the shadow horizontally (negative = left). Y offset moves it vertically (negative = up). Blur softens the edge. Spread grows or shrinks the shadow size. Inset draws the shadow inside the element instead of outside.
Can I stack multiple shadows?
Yes. Add layers to combine shadows — e.g., a sharp close shadow plus a soft distant shadow. Stacking is what creates neumorphism, floating cards, and multi-level depth effects.
Why does my shadow look harsh?
Real-world shadows are soft and slightly offset. Try increasing the blur, using a lower alpha (more transparent), and offsetting y more than x. A common formula is blur ≈ 2x the y-offset for a natural look.
Performance concerns?
Animating box-shadow can be expensive on large elements. For hover effects, consider animating opacity on a pseudo-element with a shadow instead, or use filter: drop-shadow() for certain cases.