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

[Canonical HTML page](https://gradiently.design/da/guide/css-text-shadow)

text-shadow er en lille egenskab med et stort ry for at redde ulæselige overskrifter. Den er bedre til pynt end til redning. Her er syntaksen, en håndfuld stilarter, der er værd at kopiere, og hvad du skal bruge, når læsbarhed er det egentlige problem.

## The short version

- CSS-egenskaben text-shadow tager en vandret forskydning, en lodret forskydning, en valgfri sløringsradius og en farve.
- Flere skygger kan stables på én tekst ved at adskille dem med kommaer, og den første på listen tegnes øverst.
- I modsætning til box-shadow har text-shadow ingen spread-værdi og intet inset-nøgleord.
- Hårde forskudte skygger uden sløring er den mest nyttige dekorative stil, fra retro-overskrifter til lange skygger.
- En blød mørk skygge er en svag løsning for tekst over et uroligt billede; en scrim, et mørkere billede eller en roligere baggrund gør jobbet ordentligt.

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

```css
/* 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; }
```

Hele grammatikken i fem linjer. Længder kan være negative for at kaste skyggen op eller til venstre.

| Del | Påkrævet | Hvad den gør |
| --- | --- | --- |
| Vandret forskydning | Ja | Positiv flytter skyggen til højre, negativ flytter den til venstre |
| Lodret forskydning | Ja | Positiv flytter den ned, negativ flytter den op |
| Sløringsradius | Nej | Er som standard 0, en hård kant. Kan ikke være negativ |
| Farve | Nej | Er som standard tekstfarven, `currentcolor` |

Her er ingen spread og intet `inset`. De hører til [box-shadow](https://gradiently.design/da/guide/css-box-shadow), som skygger elementets boks frem for dets bogstaver.

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.

```css
/* 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); }
```

Fem stilarter, der virker. Den lange skygge er bare den samme hårde skygge gentaget én pixel længere hver gang.

Retro-forskydninger og lange skygger er dækket visuelt i [retro-teksteffekter](https://gradiently.design/da/guide/retro-text-effect) og [3D-teksteffekter](https://gradiently.design/da/guide/3d-text-effect). 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](https://gradiently.design/da/guide/outline-text) viser begge dele.

- Indigobogstaver: #1e1b4b
- Lyserød forskydning: #f472b6
- Cremebogstaver: #fff7ed
- Orange første trin: #f97316
- Rustbrunt andet trin: #7c2d12

Farverne bag retro-eksemplerne og eksemplet med dobbelt forskydning. Forskudte skygger virker bedst, når skyggefarven tydeligt adskiller sig fra bogstaverne og ikke er en mørkere kopi af dem.

## 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](https://gradiently.design/da/guide/color-contrast-accessibility).

### Skygge som krykke

- Sløret sort glorie bag hvid tekst
- Svigter, hvor billedet er lysest
- Kontrastværktøjer melder stadig en fejl
- Grumsede kanter på lille tekst

### Ret baggrunden

- En gradient-scrim under ordene
- Mørkn eller affarv billedet
- Flyt teksten til det roligste område
- Vælg en baggrund, der er lavet til at bære ord

## 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](https://gradiently.design/da/guide/css-gradient-overlay) gennemgår lagdelingen fuldt ud.

Scrim i bunden til billedtekster: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Mørk i foden, klar to tredjedele oppe. Læg den over et foto og sæt billedteksten i den nederste tredjedel.

```css
.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;
}
```

Scrimmen som øverste baggrundslag, fotoet nedenunder. Ingen skygge på teksten er nødvendig.

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](https://gradiently.design/da/guide/text-over-image) gennemgår hver enkelt med eksempler.

Et opslag i højformat, hvor en cremefarvet overskrift krydser en lys plet af gradienten og mister kontrast

Lyse ord over baggrundens lyseste del. En skygge ville kun sløre problemet.

Det samme opslag i højformat, hvor gradienten bliver dybere bag overskriften, så den læses tydeligt

Baggrunden bliver i stedet dybere bag linjen, så ordene læses uden nogen effekt på dem.

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](https://gradiently.design/da/guide/css-gradient-text).

> **Én skygge pr. drop-shadow()** `drop-shadow()` tager én skygge pr. funktion, men du kan sammenkæde flere: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Hver skygger resultatet af den forrige.

## 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.

## FAQ

### Hvad er syntaksen for text-shadow i CSS?

`text-shadow: offset-x offset-y blur-radius color`, for eksempel `2px 2px 4px #000`. Kun de to forskydninger er påkrævet.

### Kan jeg tilføje mere end én tekstskygge?

Ja. Adskil skyggerne med kommaer. Den første på listen males oven på de andre.

### Har text-shadow en spread-værdi?

Nej. Spread og `inset` findes kun på `box-shadow`. For at gøre en tekstskygge tykkere kan du stable flere skygger med små forskydninger.

### Forbedrer text-shadow tilgængeligheden?

Ikke pålideligt. Kontrasttjek ignorerer skygger, så teksten skal opnå den krævede kontrast mod sin baggrund uden en.

### Hvordan gør jeg hvid tekst læselig på et foto uden text-shadow?

Læg en mørk gradient-scrim bag tekstområdet, mørkn billedet, eller placer ordene over en rolig del af fotoet.