CSS Shadow Generator

Design box shadows visually with up to 6 stacked layers. Each layer has independent controls for X/Y offset, blur radius, spread distance, color, opacity, and inset toggle. A live preview panel shows exactly how the shadow renders against a configurable background and box color.

Start from built-in presets — Subtle (light card shadow), Medium (elevated UI), Elevated (floating panel), Bold (dramatic depth), Inset (pressed effect), and Colored (brand shadow) — or build custom shadows from scratch.

The output is a copy-ready CSS box-shadow property with proper rgba() values that respects opacity. Multi-layer shadows produce the most realistic depth effects because real-world shadows have multiple soft and sharp components.

All rendering happens in your browser — nothing is transmitted anywhere.

Understanding CSS box-shadow syntax is key to mastering UI depth. The property accepts a comma-separated list of shadows, each defined by: horizontal offset, vertical offset, blur radius, spread radius, color, and an optional inset keyword. The horizontal and vertical offsets determine the shadow direction and distance. Positive X moves the shadow right, negative left. Positive Y moves it down, negative up.

Blur radius controls how soft or sharp the shadow edge appears. A blur of 0 creates a sharp-edged shadow (rarely desirable), while larger values create a softer, more diffuse effect. Most UI shadows use blur values between 3 px and 40 px. The blur does not increase the overall shadow size — it distributes the color across the blur area.

Spread radius expands or contracts the shadow beyond the element boundaries. Positive spread makes the shadow larger than the element, while negative spread shrinks it. A common pattern uses negative spread to prevent ambient shadows from extending too far. The spread is particularly useful for creating glow effects when combined with a large blur.

Multi-layer shadow technique: The most realistic shadows combine two or more layers. A typical pattern uses a tight, dark shadow for definition (small offset, small blur) plus a larger, lighter shadow for ambient depth (larger offset, large blur). This mimics how real lighting creates both sharp and soft shadow components. Three-layer shadows add even more realism with a very subtle, very large ambient layer.

Material Design popularized the concept of elevation-based shadows, where elements at different heights in the z-axis have progressively larger and softer shadows. This approach creates a clear visual hierarchy that communicates which elements are interactive and which are static.

Inset shadows render inside the element instead of outside. They create a recessed or pressed effect and are commonly used for form inputs (to show they are interactive), wells and sunken areas, and toggle buttons in their active state. A subtle inner shadow combined with a slight background color change creates a convincing pressed effect.

Performance: Box shadows are GPU-accelerated in modern browsers and generally perform well. However, very large blur values on many elements can impact scrolling performance. For animated shadows (like hover effects), use CSS transitions on box-shadow for smooth interpolation, or better yet, use a pseudo-element with opacity transitions for better performance on complex shadows.