Box Shadow Generator: Create Depth with CSS Shadows

Depth is what separates flat layouts from interfaces that feel tactile and alive. CSS box-shadow is the primary tool for creating that depth — from subtle elevation cues on cards to dramatic floating effects on modals. But the difference between an amateur shadow and a professional one often comes down to understanding the six parameters that control every shadow. This data-driven guide breaks down each parameter with concrete values, explores layered shadow techniques used by top design systems, and shows you how to generate production-ready code with our free Box Shadow Generator.

The Box Shadow Syntax

Every box-shadow value follows this structure:

box-shadow: [inset] [horizontal] [vertical] [blur] [spread] [color];

Only the horizontal and vertical offsets are required. Everything else is optional. Let's break down each parameter with specific data on how different values behave.

Parameter 1: Horizontal Offset (X-axis)

The horizontal offset moves the shadow left or right from the element. Positive values shift it right; negative values shift it left.

• 0px — Shadow is centered horizontally. Creates a uniform glow or elevation effect. Most common for generic elevation.
• 1-4px — Barely perceptible shift. Combined with small blur, creates a subtle directional light source from the left. Used in Material Design for low-elevation states.
• 5-10px — Noticeable directional shadow. Suggests a light source to the upper-left. Common for card hover states.
• 15px+ — Strong directional effect. Can look dramatic or cartoonish depending on blur. Used sparingly for floating elements like tooltips or popovers.
• Negative values (−2px to −10px) — Shadow shifts left. Creates a light source from the right. Unusual but effective for specific design contexts.

Parameter 2: Vertical Offset (Y-axis)

The vertical offset is arguably the most impactful parameter. It directly controls how "lifted" an element appears.

• 0px — No elevation. The shadow appears as a glow or halo around the element. Used for focus states and highlighted elements.
• 1px — Barely-there lift. The minimum elevation to suggest the element is above the surface. Standard for resting state in most design systems.
• 2-4px — Gentle elevation. The most common value for cards, buttons, and interactive elements. Creates a clean, professional look.
• 8-16px — Strong elevation. Used for dropdowns, popovers, and active/focused states. The element clearly floats above the page.
• 20-40px — Dramatic floating. Used for modals, dialogs, and tooltips. Creates maximum visual separation from the background.

Key data point: Material Design uses 5 elevation levels: 0dp (resting), 2dp (cards), 4dp (raised elements), 8dp (menus), and 16dp (modals). Each level increases the Y-offset and blur radius proportionally.

Parameter 3: Blur Radius

Blur controls how soft or hard the shadow's edges are. It's what makes shadows look realistic.

• 0px — Sharp-edged shadow. Looks artificial, like a duplicate element behind the original. Rarely used except for hard drop-shadow effects.
• 1-3px — Very slight softening. Retains definition while removing harshness. Good for crisp UI elements at small scale.
• 4-8px — Standard soft shadow. The most commonly used range. Creates a natural-looking shadow that mimics real-world lighting.
• 10-20px — Very soft, diffused shadow. The edges fade gradually. Used for larger elements and dramatic elevation effects.
• 25-50px+ — Extremely diffuse. Creates an ambient glow rather than a defined shadow. Used for spotlight effects and hero elements.

Rule of thumb: The blur radius should typically be 1.5× to 2× the Y-offset. A 4px Y-offset pairs well with a 6-8px blur. A 16px Y-offset pairs well with a 24-32px blur. This ratio produces natural-looking shadows.

Parameter 4: Spread Radius

Spread expands or contracts the shadow before blur is applied. It's the least understood but most powerful parameter for fine-tuning.

• 0px — No change. Shadow matches the element's exact size (before blur).
• 1-5px (positive) — Shadow extends beyond the element. Creates a broader base that feels more grounded. Useful for making thin elements appear to cast a wider shadow.
• 10px+ — Dramatic expansion. Creates a border-like effect when combined with zero blur. Used for glow effects and neon styling.
• Negative values (−1 to −5px) — Shadow contracts inward. Creates a tighter shadow that hugs the element. Useful for small elements where you want the shadow to be slightly smaller than the element itself.

Parameter 5: Color

Shadow color dramatically affects the mood and realism of your elevation. The key insight: real shadows are never pure black.

• rgba(0, 0, 0, 0.1) — Very subtle, barely visible. Used for resting state shadows on light backgrounds. Professional and clean.
• rgba(0, 0, 0, 0.15-0.2) — Standard shadow opacity. The sweet spot for most card and button shadows. Visible but not overpowering.
• rgba(0, 0, 0, 0.3-0.4) — Strong shadow. Used for modals and high-elevation elements. Creates clear visual hierarchy.
• rgba(0, 0, 0, 0.6+) — Very heavy. Approaches a solid outline. Use sparingly for maximum emphasis.
• Colored shadows (rgba(139, 92, 246, 0.3)) — Tinted shadows that match your brand color. A modern trend that adds personality and warmth to elevation.

Layered Shadow Presets

Professional design systems rarely use a single shadow. They layer multiple shadows to create depth that mimics real-world lighting — a sharp contact shadow near the element and a soft ambient shadow farther away.

Material Design Card (Elevation 2):

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

iOS-Style Floating Card:

box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.12);

Dramatic Modal:

box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 10px 20px rgba(0,0,0,0.1), 0 20px 40px rgba(0,0,0,0.08);

Neon Glow Effect:

box-shadow: 0 0 10px rgba(139,92,246,0.3), 0 0 20px rgba(139,92,246,0.2), 0 0 40px rgba(139,92,246,0.1);

Inset Pressed Effect:

box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), inset 0 -1px 0 rgba(255,255,255,0.1);

Performance Considerations

Box shadows are rendered by the browser's compositor and can impact performance, especially on lower-end devices:

• Limit shadow count: Each additional shadow increases rendering time. Stick to 2-3 layers maximum.
• Use will-change sparingly: Adding will-change: box-shadow to frequently animated elements can improve performance, but don't overuse it — it consumes memory.
• Prefer transform for hover animations: Instead of animating box-shadow on hover, use transform: translateY(-2px) combined with a static shadow. Transform animations run on the GPU and are significantly smoother.
• Test on mobile: Complex shadows can cause frame drops during scrolling on mobile devices. Reduce shadow complexity for mobile-specific stylesheets.
• Use spread wisely: Large spread values increase the shadow area, which increases the repaint region. Keep spread values under 20px for optimal performance.

Conclusion

Great box shadows aren't accidental — they're the result of understanding how each parameter contributes to the final effect. By mastering horizontal and vertical offsets, blur and spread radius, and color opacity, you gain precise control over elevation and depth. Layered shadows add realism that single shadows can't achieve, and performance-conscious techniques keep your interfaces smooth across all devices.

Experiment with the presets above, then fine-tune them for your specific design context. And when you need quick, reliable results, our Box Shadow Generator is ready to help.

Related Articles