Box Shadow Generator

Horizontal offset (X): moves shadow left (negative) or right (positive). Vertical offset (Y): moves shadow up (negative) or down (positive). Blur radius: controls softness - 0 = sharp edge, higher = softer/blurred. Spread radius: expands (positive) or contracts (negative) shadow size before blur is applied. Color: shadow color, typically dark gray/black with opacity. Inset keyword: makes shadow appear inside box rather than outside. Formula: box-shadow: [inset] X Y blur spread color. Example: box-shadow: 0 4px 6px 0 rgba(0,0,0,0.1) = shadow below element, soft.

Material Design uses two shadows per elevation level: one sharp shadow directly below (small blur, small offset) simulating direct light, plus one soft shadow farther below (large blur, no spread) simulating ambient light. Formula for elevation levels: Level 1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Level 2: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12). Increase offsets and blur proportionally for higher elevations. Always use two layers, never change spread, adjust opacity for intensity. Our presets include Material levels 1-5.

box-shadow applies shadow to element's box model (rectangle), always rectangular regardless of content shape. Respects border-radius. Fast performance. drop-shadow CSS filter applies shadow to element's alpha channel (actual shape), follows PNG transparency, SVG paths, irregular shapes. Slightly slower. Use box-shadow for rectangles, rounded boxes, cards (faster, standard). Use drop-shadow for irregular shapes, PNGs with transparency, SVG graphics, when shadow must match exact shape. box-shadow stacks multiple layers; filter: drop-shadow does not. Most UI uses box-shadow; illustrations use drop-shadow.

Neumorphism requires paired shadows: light shadow on top-left (gives raised effect) and dark shadow on bottom-right (gives depth). Use inset shadows for pressed/inset appearance. Formula: background color must match container (usually light gray #e0e0e0). Raised button: box-shadow: -5px -5px 10px rgba(255,255,255,0.5), 5px 5px 10px rgba(0,0,0,0.1). Pressed button: box-shadow: inset -2px -2px 5px rgba(255,255,255,0.5), inset 2px 2px 5px rgba(0,0,0,0.1). Key: opposite offsets, one white/light shadow, one dark shadow, soft blur (10-20px), subtle opacity.

Shadows extend beyond element bounds but are often clipped by parent containers with overflow: hidden or overflow: auto. Fix: ensure parent containers have overflow: visible (default) or sufficient padding to accommodate shadow spread + blur. If parent must have overflow: hidden (for scrolling), move shadow to a pseudo-element (::before/::after) positioned behind main content. Alternative: use filter: drop-shadow which may behave differently. When designing cards in grids, add padding/gap to accommodate shadows without clipping. Test shadow visibility in actual layout context, not isolation.

Yes, box-shadow is animatable with CSS transitions and keyframes. For hover effects: transition: box-shadow 0.3s ease; then change shadow on :hover state. Performance warning: animating box-shadow is expensive (triggers paint, not just composite) - can cause jank on lower-end devices or many elements. Better approach for performance: animate opacity of ::before/::after pseudo-element with shadow applied, or use transform: translateY + opacity for lift effect. For loading/pulse effects, keyframe animate shadow spread or opacity. Keep animations subtle - drastic shadow changes are jarring.