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