CSS Reference
box-shadow
Adds a shadow effect around an element. The foundation of elevation and depth in modern UI.
Last updated: October 2026
Definition: The box-shadow property draws a shadow behind or inside an element. The syntax is offset-x offset-y blur-radius spread-radius color. It doesn't affect layout — it's purely visual, so it's safe to use freely for elevation.
🎬 Live Examples
Five shadow intensities and a glow effect.
💡 Shadows create visual hierarchy — a large shadow feels closer to the user, a small one feels further away.
Basic Syntax
/* Full syntax */
box-shadow: offset-x offset-y blur-radius spread-radius color;
/* Example */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}
/* Inner shadow */
.inset {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}Only offset-x and offset-y are required. Everything else defaults.
🎯 The 5 Values Explained
| Value | Meaning | Example |
|---|---|---|
| offset-x | Horizontal offset | 0 = centered |
| offset-y | Vertical offset | 4px = shadow below |
| blur-radius | How soft the shadow is | 8px = soft |
| spread-radius | How much the shadow grows | 0 = no growth |
| color | Shadow color (with alpha) | rgba(0,0,0,0.3) |
An Elevation System
Define a set of shadows as CSS variables for consistent depth across your site.
:root {
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.5);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.6);
}
.card { box-shadow: var(--shadow-sm); }
.dropdown { box-shadow: var(--shadow-md); }
.modal { box-shadow: var(--shadow-xl); }
.toast { box-shadow: var(--shadow-2xl); }Inset Shadows
Add the inset keyword to draw the shadow inside the element.
/* Pressed input field */
input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Inset top highlight for glassmorphism */
.glass {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 4px 8px rgba(0, 0, 0, 0.3);
}Multiple Shadows
Chain shadows with commas for realistic layering.
/* Realistic multi-layer shadow */
.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.1),
0 2px 4px rgba(0, 0, 0, 0.1),
0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Colored glow with hard shadow */
.neon {
box-shadow:
0 0 10px rgba(59, 130, 246, 0.6),
0 0 20px rgba(59, 130, 246, 0.4),
0 0 40px rgba(59, 130, 246, 0.2);
}Multiple shadows create depth that a single shadow can't match. This is how modern design systems simulate realistic elevation.
Focus Rings with box-shadow
Box-shadow doesn't affect layout, so it's ideal for focus indicators.
button:focus-visible {
outline: 2px solid transparent; /* Forced-colors mode */
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
}
/* Multiple focus rings */
.input:focus {
border-color: #3b82f6;
box-shadow:
0 0 0 1px #3b82f6,
0 0 0 4px rgba(59, 130, 246, 0.15);
}💡 Why not just outline? Outline can't have rounded corners that follow border-radius on all browsers. Box-shadow respects border-radius and doesn't shift layout.
Hover Lift Effect
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}Combine transform and box-shadow to create a realistic "lift" effect. The shadow grows and moves down while the element moves up.
🎯 Real-World Shadow Patterns
| Element | Typical shadow |
|---|---|
| Card (resting) | 0 1px 3px rgba(0,0,0,0.2) |
| Card (hover) | 0 10px 25px rgba(0,0,0,0.3) |
| Dropdown menu | 0 4px 12px rgba(0,0,0,0.3) |
| Modal | 0 20px 60px rgba(0,0,0,0.6) |
| Toast | 0 25px 50px rgba(0,0,0,0.5) |
| Input (inset) | inset 0 1px 2px rgba(0,0,0,0.3) |
| Focus ring | 0 0 0 3px rgba(59,130,246,0.5) |
⚠️ Common Mistakes
- Using pure black shadows. Pure black looks unnatural. Use
rgba(0,0,0,0.1)–0.4for softer depth. - Too many shadows. More than 3 stacked shadows is usually overkill. Use 1–3 layers.
- Forgetting
spread-radiusdefaults to 0. If you want the shadow larger than the element, set spread explicitly. - Using box-shadow when border is needed. Box-shadow doesn't affect layout — if you need the element to grow, use border.
- Dark shadows on dark backgrounds. Use a slightly lighter color or a colored glow instead.
- Not testing on light mode. A shadow that works in dark mode may be invisible in light mode. Test both.
- Using box-shadow for focus rings without a fallback. In Windows High Contrast Mode, shadows may be stripped. Always include an outline as a backup.
♿ Accessibility Notes
- Never rely on shadow alone to convey meaning. Add text, icons, or color alongside.
- Focus rings need enough contrast. Aim for 3:1 contrast against the surrounding background.
- Box-shadow doesn't render in Windows High Contrast Mode. Use
outlineas the primary focus indicator and box-shadow as an enhancement. - Don't use box-shadow to hide content. Unlike overflow, shadows extend visually but stay in the accessibility tree.
- Test with reduced motion. If your hover effect uses transform + shadow + transition, respect
prefers-reduced-motion. - Shadows don't help screen reader users. They're purely visual. Use text and ARIA to convey state.
❓ Frequently Asked Questions
What is the CSS box-shadow property?
The box-shadow property adds a shadow effect around an element. The syntax is offset-x, offset-y, blur-radius, spread-radius, and color. Prefix with 'inset' for an inner shadow. Multiple shadows can be chained with commas.
What is the syntax order for box-shadow?
box-shadow: offset-x offset-y blur-radius spread-radius color. Only offset-x and offset-y are required. The inset keyword goes at the start for inner shadows.
Does box-shadow affect layout?
No. Box-shadow does not affect layout — it doesn't take up space and isn't included in the box model. It's purely visual and can be used freely for elevation without breaking layouts.
How do I create an elevation system with box-shadow?
Define a set of CSS variables for increasing shadow intensity — like --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl. Use them across cards, dropdowns, and modals to create visual hierarchy.
Can box-shadow be used for focus rings?
Yes. box-shadow can create a focus ring without affecting layout, unlike border. Example: box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5). This is a common modern technique.