CSS — Text Effects

Text shadow deep-dive

h1 {
    text-shadow: x y blur color;
}

Recipe	Code	Look
Legibility scrim	0 2px 8px rgba(0,0,0,.6)	white text over photos stays readable
Soft lift	0 1px 2px rgba(0,0,0,.3)	subtle depth on headings
Retro offset	3px 3px 0 crimson	hard-edged print poster
Neon	0 0 12px #2dd4bf	glow (use sparingly!)

Multiple shadows stack:

.retro {
    color: white;
    text-shadow:
        2px 2px 0 #0f766e,
        4px 4px 0 #134e4a;
}

Outlined (stroked) text

No native stroke property — the shadow-stacking hack:

.outline-text {
    color: white;
    -webkit-text-stroke: 2px black;   /* real option, good support */
    paint-order: stroke fill;          /* keeps stroke behind fill */
}

/* fallback via 4-direction shadows */
.stroke-fallback {
    text-shadow:
        -1px -1px 0 black, 1px -1px 0 black,
        -1px  1px 0 black, 1px  1px 0 black;
}

Gradient-filled headlines

.gradient-headline {
    background: linear-gradient(90deg, #0d9488, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

Pair with display:inline-block so background hugs only the words.

Animated shine sweep

.shine {
    position: relative;
    display: inline-block;
    overflow: hidden;
}
.shine::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
    translate: -120% 0;
    transition: translate .7s ease;
}
.shine:hover::after { translate: 120% 0; }

(A light band sweeps across the heading on hover.)

Letterpress / engraved

.engraved {
    color: #d6d3d1;
    text-shadow: 0 1px 0 white;   /* highlight below = pressed-in */
}

Works because light-from-above intuition: dark top edge + bright bottom edge reads as carved.

Over-photo readability toolkit

.hero-title {
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
/* or better: darken the photo itself */
.hero {
    background:
        linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.2)),
        url("scene.jpg") center/cover;
}

Scrim-behind beats shadow-on-every-letter for long text.

Fun with transforms & spacing

.spaced   { letter-spacing: .4em; }         /* tracked-out labels */
.tall     { line-height: 2; word-spacing: .5em; }
.vertical { writing-mode: vertical-rl; }    /* sideways CJK/sidebar text */
.upside   { transform: rotate(180deg); }

Taste guardrails: one expressive headline per page · glow ≠ professional · always check contrast after effects · effects are decoration — never carry meaning alone.

Mini Practice

1. Four shadow recipes on four headings.
2. Stroke text with -webkit-text-stroke + paint-order.
3. Gradient headline clipped to text.
4. Hover shine sweep on a logo.
5. Hero title over photo using BOTH scrim and shadow — pick your preference.
6. Vertical sidebar label via writing-mode.

CSS track complete — every syllabus topic now has rich content. 🎉