Shadows create the illusion of depth, making flat interfaces feel tangible. A well-crafted shadow can guide attention, establish hierarchy, and add polish to your designs. Let's explore how to use them effectively.
Understanding Box-Shadow Syntax
box-shadow: offset-x offset-y blur-radius spread-radius color;- offset-x: Horizontal distance (positive = right)
- offset-y: Vertical distance (positive = down)
- blur-radius: How soft the shadow is (optional)
- spread-radius: How large the shadow is (optional)
- color: Shadow color (use rgba for transparency)
Create shadows visually with our box shadow generator.
Basic Examples
Simple Drop Shadow
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);Subtle elevation, perfect for cards.
Larger Shadow
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);Modal or overlay elevation.
Inset Shadow
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);Creates depth inward—pressed buttons, input fields.
Shadow Design Principles
Light Source Consistency
Shadows imply a light source. Keep it consistent across your design:
- Light from above: positive offset-y
- Light from left: positive offset-x
- Most designs use top-left light source
Elevation Hierarchy
Higher elements cast larger, softer shadows:
/* Low elevation (level 1) */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
/* Medium elevation (level 3) */
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
/* High elevation (level 5) */
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);Layered Shadows
Multiple shadows create more realistic depth:
box-shadow:
0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.16),
0 8px 8px rgba(0,0,0,0.20);Creative Shadow Effects
Colored Shadows
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.5);Uses element's brand color for cohesive glow effect.
Hard Shadow (No Blur)
box-shadow: 5px 5px 0 #000;Retro, brutalist design aesthetic.
Soft All-Around Glow
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);No offset, just ambient glow.
3D Button Effect
/* Normal state */
box-shadow: 0 4px 0 #1a5f7a;
/* Pressed state */
box-shadow: 0 2px 0 #1a5f7a;
transform: translateY(2px);Shadows for Common UI Elements
Cards
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);Subtle lift, doesn't overwhelm content.
Modals/Dialogs
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);Significant elevation to separate from background.
Dropdown Menus
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);Buttons on Hover
.button {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s;
}
.button:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}Performance Considerations
- Shadows are expensive: Large blur radii tax the GPU
- Use will-change: For animated shadows, hint to browser
- Avoid on many elements: Hundreds of shadowed items slow rendering
- Simplify on mobile: Consider reducing complexity for performance
Dark Mode Shadows
Shadows on dark backgrounds need different treatment:
- Traditional shadows are invisible on dark
- Use subtle light edges instead
- Or use colored ambient glows
/* Dark mode shadow */
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);Tools
- Box Shadow Generator - Visual shadow creation
- CSS Gradient Generator - Complementary effects
- Color Picker - Shadow colors
Shadows add professionalism and depth to interfaces. Use our box shadow generator to experiment with effects.
