What You'll Learn
Create depth with box-shadow using offset, blur, and spread
Layer multiple shadows for realistic Material Design elevations
Use inset shadows for inner depth and embossed effects
Create colored shadows for vibrant, modern designs
Build glow effects with zero offset and high blur
Implement focus rings and outline effects with spread radius
Understand shadow performance and optimization techniques
Introduction to Box Shadows
Box shadows add depth and dimension to elements, creating visual hierarchy and realistic lighting effects. The box-shadow property controls offset, blur, spread, color, and whether shadows appear outside (default) or inside (inset) elements.
Shadows are essential for modern UI design, particularly in Material Design's elevation system where shadow depth indicates an element's position in the z-axis stack.
GPU-Accelerated: Box shadows are rendered by the GPU and perform well even with multiple layers. However, avoid excessive blur radius and large spread values on many elements simultaneously.
Box Shadow Syntax
The box-shadow property accepts up to six values in a specific order: horizontal offset, vertical offset, blur radius, spread radius, color, and the optional inset keyword.
/* Full syntax */
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
/* Basic examples */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
/* offset-x: 5px right, offset-y: 5px down, blur: 10px, color: semi-transparent black */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
/* Common pattern: shadow directly below element */
box-shadow: -5px -5px 15px rgba(0, 0, 0, 0.2);
/* Negative offsets: shadow to left and top */
box-shadow: 0 0 20px rgba(33, 150, 243, 0.5);
/* Zero offsets: centered glow effect */
/* With spread radius */
box-shadow: 0 4px 10px 5px rgba(0, 0, 0, 0.15);
/* Spread of 5px makes shadow larger */
/* Inset shadow */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
/* Shadow appears inside element */
Parameter Order: Offset-x and offset-y are required. Blur, spread, and color are optional. The inset keyword can appear at the beginning or end.
Offset & Blur - Basic Shadows
Control shadow position with horizontal (x) and vertical (y) offsets, and softness with blur radius.
/* Hard shadow (no blur) */
box-shadow: 5px 5px 0 0 #333;
/* Sharp, defined shadow to right and bottom */
/* Soft shadow */
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
/* Blurred shadow creates soft, realistic depth */
/* Subtle bottom shadow (most common) */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Only vertical offset, very subtle */
/* Large soft shadow */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
/* Dramatic depth with large blur radius */
/* Negative offsets */
box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.2);
/* Shadow to top-left instead of bottom-right */
/* Practical examples */
/* Card shadow */
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Button hover effect */
.button:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Modal overlay */
.modal {
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
Realistic Lighting: For natural-looking shadows, use positive y-offset (shadow below element) as if light comes from above. Blur radius typically equals or exceeds offset distance.
Spread Radius - Shadow Size Control
The spread radius expands or contracts the shadow before blurring. Positive values make shadows larger; negative values make them smaller.
/* No spread (default) */
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2);
/* Positive spread - enlarges shadow */
box-shadow: 0 4px 10px 5px rgba(0, 0, 0, 0.2);
/* Shadow extends 5px beyond blur radius */
/* Negative spread - shrinks shadow */
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.2);
/* Shadow is smaller, more contained */
/* Outline effect (zero offset, zero blur, only spread) */
box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.3);
/* Creates outline/ring around element */
/* Focus ring */
.input:focus {
box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.4);
outline: none;
}
/* Layered outline rings */
.button {
box-shadow:
0 0 0 3px #2196f3,
0 0 0 6px #4caf50,
0 0 0 9px #ff9800;
}
Spread for Outlines: Use box-shadow: 0 0 0 Npx color; instead of outline when you need rounded outlines that respect border-radius.
Multiple Shadows - Layered Depth
Stack multiple shadows by separating them with commas. Shadows are rendered in order, with the first shadow on top.
/* Material Design elevation */
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
/* Two shadows create more realistic depth */
/* Progressive blur layers */
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.1);
/* Each layer adds depth */
/* Colored ring effect */
box-shadow:
0 0 0 3px #2196f3,
0 0 0 6px #4caf50,
0 0 0 9px #ff9800;
/* Rainbow rings using spread */
/* Glow + depth */
box-shadow:
0 0 20px rgba(33, 150, 243, 0.6),
0 8px 16px rgba(0, 0, 0, 0.2);
/* Blue glow with realistic shadow */
/* Text shadow simulation */
box-shadow:
2px 2px 0 #000,
4px 4px 0 #333;
/* Layered hard shadows for text effect */
Material Design: Google's Material Design uses specific two-shadow combinations for each elevation level (1-5). The first shadow is sharp and close; the second is softer and larger.
Inset Shadows - Inner Depth
The inset keyword creates shadows inside elements, perfect for recessed or embossed effects.
/* Basic inset shadow */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
/* Shadow appears at top inside element */
/* Deep inset */
box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.3);
/* Stronger inner shadow */
/* Embossed effect (dual inset) */
box-shadow:
inset 5px 5px 10px rgba(0, 0, 0, 0.15),
inset -5px -5px 10px rgba(255, 255, 255, 0.7);
/* Dark shadow top-left, light shadow bottom-right */
/* Pressed button */
.button:active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}
/* Input field depth */
input {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
border: 1px solid #ddd;
}
/* Combining inset and outset */
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.1),
0 2px 4px rgba(0, 0, 0, 0.1);
/* Inner and outer shadows together */
Inset Limitation: Inset shadows appear inside the element's border box. They won't overflow the element or affect surrounding content.
Colored Shadows - Vibrant Effects
Replace traditional black/gray shadows with colored shadows for modern, vibrant designs.
/* Blue shadow (brand color) */
box-shadow: 0 8px 16px rgba(33, 150, 243, 0.4);
/* Purple depth */
box-shadow: 0 10px 25px rgba(156, 39, 176, 0.3);
/* Neon glow effect */
box-shadow:
0 0 20px rgba(33, 150, 243, 0.8),
0 0 40px rgba(33, 150, 243, 0.4),
0 0 60px rgba(33, 150, 243, 0.2);
/* Multiple layers create intense glow */
/* Colored outline */
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.5);
/* Gradient-like effect with colored shadows */
box-shadow:
0 4px 8px rgba(156, 39, 176, 0.3),
0 8px 16px rgba(33, 150, 243, 0.2);
/* Purple close, blue far */
/* Practical: Error state */
.error {
box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2);
}
/* Success glow */
.success {
box-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}
Brand Colors: Use colored shadows in your brand palette to create cohesive, on-brand depth effects. Keep opacity low (0.2-0.4) for subtlety.
Material Design Elevations
Material Design defines five elevation levels using precise shadow combinations. Each level indicates the element's height above the surface.
/* Elevation 1 - Resting elevation for cards */
.elevation-1 {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* Elevation 2 - Raised cards, buttons */
.elevation-2 {
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.16),
0 3px 6px rgba(0, 0, 0, 0.23);
}
/* Elevation 3 - Hover state, menus */
.elevation-3 {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}
/* Elevation 4 - Dialogs, pickers */
.elevation-4 {
box-shadow:
0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);
}
/* Elevation 5 - Navigation drawer, modals */
.elevation-5 {
box-shadow:
0 19px 38px rgba(0, 0, 0, 0.30),
0 15px 12px rgba(0, 0, 0, 0.22);
}
/* Interactive elevation change */
.card {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
transition: box-shadow 0.3s ease;
}
.card:hover {
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.19),
0 6px 6px rgba(0, 0, 0, 0.23);
}
Elevation Hierarchy: Use lower elevations (1-2) for content cards, medium (3) for hover states and dropdowns, and high (4-5) for modals and navigation. Consistent elevation creates visual hierarchy.
Key Takeaways
Syntax: offset-x offset-y blur-radius spread-radius color insetOffset: Positive values move shadow right/down; negative values move left/upBlur radius: Higher values create softer shadows; zero creates hard edgesSpread radius: Positive expands shadow; negative shrinks itMultiple shadows: Comma-separated; first listed renders on topInset keyword: Creates inner shadows for recessed/embossed effectsRealistic shadows: Positive y-offset simulates light from aboveOutline effect: Use 0 0 0 Npx color for rounded outlinesMaterial Design: Five elevation levels use two-shadow combinationsColored shadows: Use brand colors with low opacity for modern effectsGlow effects: Zero offsets with high blur create centered glowPerformance: Shadows are GPU-accelerated but avoid excessive blur/spread on many elementsCombine inset and outset shadows for complex depth effects