CSS — Shadows

box-shadow anatomy

.card {
    box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.25);
    /*           x   y   blur spread? color            */
}

Part	Meaning
offset-x	right (+) / left (−)
offset-y	down (+) / up (−)
blur	softness radius
spread	grow (＋) / shrink (−) the shadow shape
color	usually translucent black

What it renders

(A soft dark halo below-right of the card — reads as "floating above the page.")

Elevation = shadow vocabulary

Depth communicates interactivity. A typical scale:

--shadow-1: 0 1px 3px rgba(0,0,0,.12);              /* resting card     */
--shadow-2: 0 4px 12px rgba(0,0,0,.15);             /* raised / hover   */
--shadow-3: 0 12px 28px rgba(0,0,0,.18);            /* dropdown         */
--shadow-4: 0 24px 60px rgba(0,0,0,.25);            /* modal            */

.card:hover { box-shadow: var(--shadow-2); }

Pair with the transitions lesson for buttery lift effects:

.card {
    transition: transform .2s, box-shadow .2s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
}

Inset shadows

inset flips the shadow inside the element:

.well {
    box-shadow: inset 0 2px 6px rgba(0,0,0,.2);   /* pressed-in look */
}
input:focus {
    box-shadow: inset 0 0 0 2px teal;             /* ring via spread */
}

Multiple shadows — comma stack

.fancy {
    box-shadow:
        0 1px 2px rgba(0,0,0,.1),
        0 8px 24px rgba(0,0,0,.12),
        inset 0 0 0 1px rgba(255,255,255,.08);
}

Layered tight + wide shadows look more real than one blurry blob.

Glow variants

.focus-ring { box-shadow: 0 0 0 3px rgba(13,148,136,.35); }
.neon       { box-shadow: 0 0 20px rgba(45,212,191,.8); }

Zero offsets + colored shadows produce rings and glows.

text-shadow

Same idea on glyphs:

h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

/* hard offset = retro print effect */
.retro { text-shadow: 3px 3px 0 crimson; }

Primary legit use: white-on-photo legibility. Glowing titles age poorly.

Performance & pitfalls

1. Large blurs are GPU-cheap compared to animating layout, but dozens of huge shadows still cost — animate transform/opacity, not shadow size
2. Shadows don't affect layout — they can be clipped by parent overflow: hidden
3. border-radius shapes shadows automatically ✓
4. On dark themes use darker backgrounds instead of black shadows (invisible there)

Quick recipes

.subtle   { box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.10); }
.pill-btn { box-shadow: 0 2px 0 rgba(0,0,0,.25); }         /* solid press edge */
.avatar   { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand); }  /* double ring */

Mini Practice

1. Four-level elevation scale; apply to card → hover → dropdown → modal.
2. Card-lift transition using transform + shadow together.
3. Inset well + focus ring on a search input.
4. Double-ring avatar with brand color.
5. White hero headline with legible text-shadow over a photo.

Next: rounded corners →