Implementing Shadow Effects with CSS box-shadow
Tech
1
The box-shadow property in CSS applies one or more shadow effects to an element's frame.
Syntax
.element {
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color inset;
}
Property Values
- horizontal-offset (required): Horizontal shadow position (negative values allowed).
- vertical-offset (required): Vetrical shadow position (negative values allowed).
- blur-radius (optional): Blur distance; higher values create softer shadows.
- spread-radius (optional): Shadow expansion size.
- color (optional): Shadow color using any valid CSS color notation.
- inset (optional): Changes shadow from outer to inner.
Multiple shadows can be applied using comma-separated values:
.card {
box-shadow: 2px 4px 8px rgba(0,0,0,0.1),
-2px -2px 4px rgba(255,255,255,0.5) inset;
}
Browser Compatibiltiy Supported in IE9+, Firefox 4+, Chrome, Safari 5.1.1+, and Opera.
Default Values
- Initial:
none - Inherited: No
- JavaScript access:
element.style.boxShadow
Practical Example
.panel {
width: 300px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 5px 5px 15px 2px #d1d5db;
}
Common Applications
- Creating depth for card components
- Simulating lifted UI elements
- Adding visual separation between layers
- Implementing inset shadows for pressed button states
