box-shadow
box-shadow adds depth, separation, and focus to an element without extra markup. It is often used for cards, overlays, and elevated controls.
Overview
box-shadow adds depth, separation, and focus to an element without extra markup. It is often used for cards, overlays, and elevated controls.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 10 | 12 | 4 | 5.1 | 18 | 5 | |
inset | 1 | 12 | 3.5 | 5 | 18 | 4.2 |
multiple shadows Multiple shadows | 1 | 12 | 3.5 | 3 | 18 | 1 |
none | 1 | 12 | 3.5 | 3 | 18 | 2 |
spread radius Spread radius | 1 | 12 | 3.5 | 5 | 18 | 4.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 2 item(s)
Implementation note
- Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.
Compatibility
- Available with a vendor prefix: -webkit- (1)
Notes 4 item(s)
Implementation note
- Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.
Compatibility
- Available with a vendor prefix: -webkit- (49)
- Available with a vendor prefix: -moz- (3.5)
Removed
- This feature was removed in a later browser version (13)
Notes 2 item(s)
Implementation note
- Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.
Compatibility
- Available with a vendor prefix: -webkit- (3)
Notes 2 item(s)
Implementation note
- Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 2 item(s)
Implementation note
- Shadows affect layout in this browser. For example, if you cast an outer shadow to a box with a `width` of `100%`, then you'll see a scrollbar.
Compatibility
- Available with a vendor prefix: -webkit- (1)
Syntax
CSS
/* Basic drop shadow */
.card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Elevation (multiple shadows) */
.elevated {
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 1px 2px rgba(0, 0, 0, 0.24);
}
/* Inset Shadow */
.inset-input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}Live demo
Use cases
Elevated surfaces
Differentiate cards, dropdowns, and modal panels from the page background.
Interaction states
Add hover or active depth changes that make controls feel responsive.
Cautions
- Heavy shadows can reduce clarity, especially on low-contrast or cluttered screens.
- Shadow alone is not a reliable state indicator for focus or selection.
Accessibility
- Use shadows as a supporting cue and keep focus states visible even when shadows are hard to perceive.
Related links
Powered by web-features