Box Shadow Property
Last updated: 2026-09-13
box-shadow Box Shadow Property
The box-shadow property adds one or more shadow layers around or inside an element's border box, giving the element depth and hierarchy on the page. It is a core property for modern UI effects such as floating cards and pressed buttons, and supports offset, blur radius, spread radius, and color.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | all |
| Animation Type | shadow |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
box-shadow: none | <shadow>#;
/* <shadow> = inset? && <length>{2,4} && <color>? */⚙️ Values
| Value | Type | Description |
|---|---|---|
none | Keyword | No box shadow |
<shadow># | Type | A shadow list: inset? horizontal vertical blur spread color |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-shadow | ✓ v10 | ✓ v12 | ✓ v3.5 | ✓ v5.1 | ✓ v10.5 |
| Supported in all major browsers | |||||
Tip： The first two length values (horizontal and vertical offset) are required. The blur radius and spread radius default to 0, and the color defaults to the element's current text color.
Tip： The inset keyword draws the shadow inside the element, which is commonly used for pressed or recessed states.
❓ FAQ
QWhat is the difference between box-shadow and text-shadow in CSS?
Abox-shadow applies to the whole box model: the shadow follows the outline of the element's border box (including border-radius), producing a rectangular or rounded-rectangular drop. text-shadow applies only to the text itself, casting a shadow along the letterforms. Their syntax is similar — offset, blur, and color — but the affected object and the way they layer are completely different.
QHow do I write multiple box-shadow layers on one single element?
ASeparate multiple shadow sets with commas; the first set is rendered on top. For example, box-shadow: 0 2px 4px #000, 0 8px 16px #333; draws the first layer and then stacks the second one on top. Multiple shadows are often used to simulate the decay of a real shadow or to combine glow and outline effects — the more layers, the closer to real lighting.
QCan box-shadow be animated and why does the box-shadow animation jank?
Abox-shadow supports transitions and animations, but animating it triggers repaint and can stutter on low-end devices. To optimize: only switch the shadow value on hover instead of animating the whole element; use a pseudo-element carrying the shadow and fade it with transition: opacity; or, for critical cases, use filter: drop-shadow(). Always test on the target devices.
QHow do I create an inset box-shadow for a recessed or pressed effect?
APut the inset keyword at the very front of the shadow value and the shadow is cast inside the element — for example, box-shadow: inset 0 2px 8px rgba(0,0,0,0.3). Inset shadows are typically used for pressed buttons and recessed input fields. Multiple inset shadows can be comma-separated and combined into a 3D indented look.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
