CSS box-shadow Property
The box-shadow property adds shadow effects around an element frame.
Description & Usage
The box-shadow property creates visual elevation and depth by projecting drop shadows behind elements.
Multiple shadow layers can be comma-separated to craft realistic ambient light and glassmorphism UI card designs.
Property Specifications
| Property Feature | Specification |
|---|---|
| Category | Visual |
| Initial Value | none |
| Inherited | No (not inherited) |
| Applies To | All elements |
Syntax
box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color>;Property Values
| Value | Description |
|---|---|
| 0 4px 6px -1px rgba(0,0,0,0.1) | Subtle modern elevation drop shadow. |
| 0 10px 15px -3px rgba(0,0,0,0.1) | Deeper shadow for dropdowns and popovers. |
Code Examples
Hover Card Elevation Effect
.card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}
Elevates card visually when hovered.