box-shadow
The box-shadow property adds one or more shadow effects around an element's box.
Syntax
box-shadow: <inset?> <x> <y> <blur> <spread> <color>;
Examples
.card {
box-shadow:
0 1px 2px rgb(0 0 0 / 0.06),
0 8px 24px rgb(0 0 0 / 0.12);
}
.inset { box-shadow: inset 0 0 0 2px royalblue; }
Output
Renders a card with a soft layered drop shadow and an element with a blue inner outline.
Notes
Layer multiple comma-separated shadows for realistic depth. The inset keyword draws the shadow inside the box. Shadows do not affect layout. spread expands or contracts the shadow size.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 10 |
| firefox | 4.0 |
| safari | 5.1 |
| edge | 12 |