Box Shadow

The box-shadow property adds shadow effects to elements, creating depth and visual hierarchy.

Syntax

/* offset-x | offset-y | blur | spread | color */
.card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

Values Explained

• offset-x — horizontal offset (positive = right)
• offset-y — vertical offset (positive = down)
• blur-radius — how blurry the shadow is
• spread-radius — how much the shadow expands
• color — shadow color (use rgba for transparency)

Common Shadow Styles

/* Subtle elevation */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Medium elevation */
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

/* Large elevation */
.shadow-lg { box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

/* Inset shadow (inner shadow) */
.inset { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

Multiple Shadows

.card {
    box-shadow:
        0 1px 3px rgba(0,0,0,0.12),
        0 4px 12px rgba(0,0,0,0.08);
}

Hover Effects

.card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}