CSS text-shadow: syntaks, eksempler og bedre løsninger

En CSS text-shadow skrives text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): en vandret forskydning, en lodret forskydning, en valgfri sløringsradius og en farve. Adskil flere skygger med kommaer for at stable dem. Den er fremragende til dekorative effekter som skarpe forskudte overskrifter, lange skygger og falske konturer. Den er et dårligt værktøj til at gøre tekst læselig over et uroligt foto, og de bedre muligheder til det står længere nede.

Syntaksen i text-shadow

/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }

Skyggen males bag teksten og får form efter hvert eneste tegn, også understregninger og dekorationer. Den ændrer ikke layoutet: en stor forskydning kan løbe ud over elementet og overlappe naboer uden at skubbe dem væk, så giv plads med padding, hvis skyggen er stor.

Text-shadow-eksempler, der er værd at kopiere

De stilarter, der holder, er dem med hårde kanter. En skygge uden sløring læses som et bevidst grafisk valg; en blød grå sløring under brødtekst læses ofte som en fejl.

/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }

Retro-forskydninger og lange skygger er dækket visuelt i retro-teksteffekter og 3D-teksteffekter. Til en ren kontur foretrækker du -webkit-text-stroke med paint-order: stroke fill frem for det gamle trick med fire skygger i hvert hjørne, som efterlader huller på kurver; konturtekst viser begge dele.

Hvorfor en blød skygge er en svag løsning på læsbarhed

Den almindelige brug af text-shadow er en mørk sløring bag hvid tekst over et foto i håb om at adskille de to. Det hjælper lidt i kanten af hvert bogstav og gør intet for rummet inde i dem, hvor fotoet stadig skinner igennem med fuld styrke. Skruer du op for sløringen og opaciteten, til det virker, får du en klat om hvert ord. Glorier omkring tekst, lyse eller mørke, ser forældede ud og svigter stadig på billedets lyseste dele.

Kontrasttjek ignorerer også skygger. De måler tekstfarven mod baggrundsfarven, så en overskrift, der kun består takket være sin skygge, bliver markeret i en gennemgang, og det med god grund. Tærsklerne står i farvekontrast og tilgængelighed.

Bedre muligheder for tekst på billeder og gradienter

En scrim er en gradient, der kun mørkner den del af billedet, der ligger bag teksten, og toner ud til ingenting andre steder. Den holder fotoet lyst, hvor det tæller, og giver hvert bogstav samme rolige grund. Gradient-overlays i CSS gennemgår lagdelingen fuldt ud.

.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Andre pålidelige muligheder: send billedet gennem filter: brightness(0.75) på et eget lag, beskær, så ordene lander på himmel eller væg frem for detaljer, eller sæt teksten på et ensfarvet bånd. Tekst over billeder gennemgår hver enkelt med eksempler.

Det er præcis det, Gradiently-Marks gør af sig selv: det roligste område flytter sig bag dine ord, og Automatisk farve vælger lys eller mørk skrift linje for linje, uden skygge, boks eller sløring. Når du vil have skygge som pynt frem for reparation, giver bogstavbehandlinger som Dybde, Dobbelt og Spor dig forskudte stilarter uden at skrive en eneste skygge.

Text-shadow på gradienttekst

Gradienttekst laves med background-clip: text og en gennemsigtig tekstfarve. Tilføj en text-shadow, og skyggen skinner lige igennem de gennemsigtige bogstaver og gør gradienten grumset indefra. Løsningen er at skygge elementet i stedet: filter: drop-shadow(3px 3px 0 #1e1b4b) følger bogstavernes malede form og ligger bag dem. Selve teknikken er dækket i gradienttekst i CSS.

Ydeevne og animation

Hårde skygger er billige. Store sløringsradier på lange tekststykker koster mere at tegne, og animation af text-shadow gentegner teksten ved hvert billede. Vil du have en overskrift til at bevæge sig, så flyt den med transform og lad skyggen stå fast.