🎨 CSS Box Shadow Generator

CSS box-shadow adds one or more shadow effects around an element's frame. The full syntax is:

box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;

offset-x/y: Position of the shadow. blur-radius: How soft the edge is (0 = sharp). spread-radius: Expands or shrinks the shadow. inset: Moves the shadow inside the element. You can stack multiple shadows with commas for layered depth.

Material Design uses multiple shadow layers at different opacities. Here's the classic 3-layer pattern:

/* Elevation 3 */
box-shadow:
  0 2px 4px -1px rgba(0,0,0,0.2),
  0 4px 5px 0 rgba(0,0,0,0.14),
  0 1px 10px 0 rgba(0,0,0,0.12);

Use the Layered or Material presets in this tool, then adjust to match your design system.

box-shadow applies to the rectangular box of an element (respects border-radius). filter: drop-shadow() follows the actual rendered shape, including transparent PNG areas. Key differences:

• box-shadow supports spread-radius and inset — drop-shadow does not
• drop-shadow works on images with transparency
• box-shadow is generally better for cards, buttons, and containers

Animating box-shadow directly triggers repaints and can be slow. The performant pattern:

.card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s;
}
.card:hover { transform: translateY(-2px); }
.card:hover::after { opacity: 1; }

This animates opacity (composited) instead of box-shadow (repaint). 60fps guaranteed.

JavaScript:

element.style.boxShadow = '0 10px 30px rgba(0,0,0,0.25)';

Tailwind CSS: Use built-in utilities:

<div class="shadow-lg">...</div>
/* shadow-sm | shadow | shadow-md | shadow-lg | shadow-xl | shadow-2xl */

/* Custom in tailwind.config.js: */
boxShadow: {
  'neon': '0 0 20px 5px rgba(59,130,246,0.5)',
}

100% private. This tool runs entirely in your browser — zero network requests for shadow generation. No accounts, no cookies, no tracking pixels. Your shadow configurations never leave your device unless you explicitly use the Share button to generate a URL.