The CSS box-shadow property accepts four length values and a color: offset-x (horizontal displacement), offset-y (vertical displacement), blur-radius (how far the shadow spreads before fading), and spread-radius (expands or contracts the shadow shape). An optional "inset" keyword draws the shadow inside the element instead of outside. Understanding these parameters is key to creating realistic depth effects. A subtle shadow with small offset-y, moderate blur, and zero spread mimics natural overhead lighting, while a large blur with no offset creates an ambient glow effect around the element.

One of the most powerful techniques is layering multiple shadows on a single element. Material Design elevation uses this approach: two or three shadows with different blur and opacity values simulate how light interacts with surfaces at various heights. The "Layered" preset in this tool demonstrates this -- five progressively larger shadows create a smooth, photorealistic depth that a single shadow cannot achieve. Similarly, neumorphism (soft UI) combines an outer light shadow with an outer dark shadow on a matching background color, producing the distinctive extruded-plastic appearance.

Performance-wise, box-shadow triggers the browser paint phase but does not cause layout reflow, making it relatively efficient. However, very large blur radii on many elements can degrade scroll performance, especially on mobile devices. If you experience jank, consider using the CSS filter: drop-shadow() function instead -- it is composited on the GPU and can be smoother for animated elements. The key difference is that drop-shadow follows the actual alpha shape of the element (including transparent PNG regions), while box-shadow always applies to the rectangular box model. For most UI elements, box-shadow is the correct choice.

Common patterns include card elevation (small offset with medium blur), floating action buttons (larger offset and spread for a lifted appearance), input focus rings (colored shadow with zero offset and moderate spread), and glassmorphism effects (inset shadows combined with backdrop-filter for frosted glass panels). This tool lets you visually tune every parameter across multiple shadow layers and instantly copy the optimized CSS output into your project.