CSS Shadows

CSS Shadows: Adding Depth with box-shadow and text-shadow

CSS shadow properties create visual elevation and hierarchy without extra images. Used subtly, box-shadow separates floating dropdowns, sticky headers, and interactive cards from the page background; used heavily, harsh black shadows make interfaces look dated.

Syntax of box-shadow and text-shadow

A box-shadow declaration takes up to five values plus optional inset:

box-shadow: offset-x offset-y blur-radius spread-radius color;

• offset-x / offset-y: Horizontal and vertical shift (positive y drops downward).
• blur-radius: Softness of the shadow edge (0 makes a crisp solid border-like shadow).
• spread-radius (optional): Expands or shrinks shadow size before blurring.
• color: Always use low-opacity dark tint (rgba(15, 23, 42, 0.1)) rather than solid #000.

.elevated-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    /* Layered soft shadow feels natural */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08),
                0 10px 24px rgba(15, 23, 42, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.elevated-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.hero-title {
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

Shadows vs. Outlines for Focus Rings

Adding box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35); creates a soft focus halo around inputs without shifting box dimensions. Unlike box-shadow (which draws around the box rectangle), CSS filter: drop-shadow(...) traces the transparent alpha shape of irregular SVGs and PNG icons.

Common Mistakes to Avoid

• Using dark opaque shadows like 0 10px 20px #000000: Heavy black halos look unnatural; keep shadow alpha between 0.05 and 0.18.
• Animating box-shadow aggressively on huge grids: Repainting large blurred shadows on every animation frame can lag low-end mobile GPUs; prefer subtle transitions or pseudo-element opacity fades.
• Putting text-shadow on small 14px body text: Blur on small fonts ruins sharpness; save text-shadow for large headings sitting over photos.

Frequently Asked Questions

What does the inset keyword do in box-shadow?

Adding inset flips the shadow inside the element's border—useful for pressed button states or subtle inner shading along scrollable drawers.

How do I apply multiple shadows to one element?

Separate multiple shadow definitions with commas inside the same box-shadow declaration.