# Tekstskygge i CSS: syntaks, eksempler og bedre alternativer

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

text-shadow er en liten egenskap med stort ry for å redde uleselige overskrifter. Den er bedre til pynt enn til redning. Her er syntaksen, en håndfull stiler verdt å kopiere, og hva du bør bruke når lesbarhet er det egentlige problemet.

## The short version

- Egenskapen text-shadow i CSS tar en vannrett forskyvning, en loddrett forskyvning, en valgfri uskarphetsradius og en farge.
- Flere skygger kan legges i lag på samme tekst ved å skille dem med komma, og den første i listen tegnes øverst.
- I motsetning til box-shadow har text-shadow ingen spredningsverdi og intet inset-nøkkelord.
- Skarpe, forskjøvne skygger uten uskarphet er den nyttigste dekorative stilen, fra retrooverskrifter til lange skygger.
- En myk, mørk skygge er en svak løsning for tekst over et urolig bilde; en scrim, et mørkere bilde eller en roligere bakgrunn gjør jobben ordentlig.

En **tekstskygge i CSS** skrives `text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4)`: en vannrett forskyvning, en loddrett forskyvning, en valgfri uskarphetsradius og en farge. Skill flere skygger med komma for å legge dem i lag. Den er utmerket til dekorative effekter som skarpe, forskjøvne overskrifter, lange skygger og falske konturer. Den er et dårlig verktøy for å gjøre tekst lesbar over et urolig foto, og de bedre alternativene for det står lenger ned.

## Syntaksen for 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 på fem linjer. Lengder kan være negative for å kaste skyggen opp eller mot venstre.

| Del | Påkrevd | Hva den gjør |
| --- | --- | --- |
| Vannrett forskyvning | Ja | Positiv flytter skyggen mot høyre, negativ mot venstre |
| Loddrett forskyvning | Ja | Positiv flytter den ned, negativ flytter den opp |
| Uskarphetsradius | Nei | Standard er 0, en skarp kant. Kan ikke være negativ |
| Farge | Nei | Standard er tekstfargen, `currentcolor` |

Her finnes ingen spredning og ingen `inset`. De hører til [box-shadow](https://gradiently.design/nb/guide/css-box-shadow), som legger skygge på elementets boks i stedet for bokstavene.

Skyggen males bak teksten og får formen til hver glyf, også understrekinger og dekorasjoner. Den endrer ikke oppsettet: en stor forskyvning kan flyte utenfor elementet og overlappe naboer uten å skyve dem unna, så sett av plass med padding hvis skyggen er stor.

## Eksempler på tekstskygge verdt å kopiere

Stilene som holder, er de med skarpe kanter. En skygge uten uskarphet leses som et bevisst grafisk valg; en myk, grå uskarphet under brødtekst leses gjerne som en feil.

```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 stiler som virker. Den lange skyggen er bare den samme skarpe skyggen gjentatt én piksel lenger ut hver gang.

Retroforskyvninger og lange skygger vises i [retro teksteffekter](https://gradiently.design/nb/guide/retro-text-effect) og [3D-teksteffekter](https://gradiently.design/nb/guide/3d-text-effect). For en ren kontur bør du heller bruke `-webkit-text-stroke` med `paint-order: stroke fill` enn det gamle trikset med fire skygger i hvert hjørne, som etterlater hull i kurvene; [konturtekst](https://gradiently.design/nb/guide/outline-text) viser begge.

- Indigo bokstaver: #1e1b4b
- Rosa forskyvning: #f472b6
- Kremhvite bokstaver: #fff7ed
- Oransje første trinn: #f97316
- Rustrødt andre trinn: #7c2d12

Fargene bak retroeksempelet og eksempelet med dobbel forskyvning. Forskjøvne skygger virker best når skyggefargen er tydelig ulik bokstavene, ikke en mørkere kopi av dem.

## Hvorfor en myk skygge er en svak løsning for lesbarhet

Den vanlige bruken av `text-shadow` er en mørk uskarphet bak hvit tekst over et foto, i håp om å skille de to. Det hjelper litt i kantene på hver bokstav og ingenting for rommet inni dem, der fotoet fortsatt skinner gjennom med full styrke. Skru opp uskarpheten og opasiteten til det virker, og du får en flekk rundt hvert ord. Glød rundt tekst, lys eller mørk, ser utdatert ut og svikter fortsatt på de lyseste delene av bildet.

Kontrastsjekkere ignorerer også skygger. De måler tekstfargen mot bakgrunnsfargen, så en overskrift som bare består takket være skyggen, blir flagget i en revisjon, og med god grunn. Tersklene står i [fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility).

### Skygge som krykke

- Uskarp svart glorie bak hvit tekst
- Svikter der bildet er lysest
- Kontrastverktøy melder fortsatt feil
- Grumsete kanter på liten tekst

### Fiks bakgrunnen

- En gradientscrim under ordene
- Gjør bildet mørkere eller mindre mettet
- Flytt teksten til det roligste området
- Velg en bakgrunn laget for å bære ord

## Bedre alternativer for tekst på bilder og gradienter

En scrim er en gradient som bare gjør den delen av bildet som ligger bak teksten mørkere, og som tones ut til ingenting ellers. Den holder fotoet lyst der det betyr noe, og gir hver bokstav den samme rolige grunnen. [Gradientoverlegg i CSS](https://gradiently.design/nb/guide/css-gradient-overlay) går gjennom lagene i detalj.

Bunnscrim for bildetekster: `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 nederst, klar to tredjedeler opp. Legg den over et foto og sett bildeteksten i den nederste tredjedelen.

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

Scrimen som øverste bakgrunnslag, fotoet under. Ingen skygge trengs på teksten.

Andre pålitelige alternativer: kjør bildet gjennom `filter: brightness(0.75)` på et eget lag, beskjær så ordene havner på himmel eller vegg i stedet for detaljer, eller sett teksten på et ensfarget bånd. [Tekst over bilder](https://gradiently.design/nb/guide/text-over-image) går gjennom hvert av dem med eksempler.

Et stående innlegg med en kremhvit overskrift som krysser et lyst felt i gradienten og mister kontrast

Lyse ord over den lyseste delen av bakgrunnen. En skygge ville bare gjort problemet uskarpt.

Det samme stående innlegget der gradienten blir dypere bak overskriften så den leses tydelig

Bakgrunnen blir i stedet dypere bak linjen, så ordene leses uten noen effekt på dem.

Dette er nøyaktig jobben Marks fra Gradiently gjør av seg selv: det roligste området flytter seg bak ordene dine, og Auto-tekstfarge velger lys eller mørk skrift linje for linje, uten skygge, boks eller uskarphet. Når du vil ha skygge som pynt og ikke som reparasjon, gir bokstavbehandlinger som Uttrekk, Dobbel og Spor deg forskjøvne stiler uten at du skriver en eneste skygge.

## Tekstskygge på gradienttekst

Gradienttekst lages med `background-clip: text` og en gjennomsiktig tekstfarge. Legger du til en `text-shadow`, synes skyggen rett gjennom de gjennomsiktige bokstavene og grumser til gradienten innenfra. Løsningen er å legge skyggen på elementet i stedet: `filter: drop-shadow(3px 3px 0 #1e1b4b)` følger den malte formen på bokstavene og ligger bak dem. Selve teknikken står i [gradienttekst i CSS](https://gradiently.design/nb/guide/css-gradient-text).

> **Én skygge per drop-shadow()** `drop-shadow()` tar én skygge per funksjon, men du kan lenke flere: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Hver av dem kaster skygge av resultatet fra den forrige.

## Ytelse og animasjon

Skarpe skygger er billige. Store uskarphetsradier på lange tekstpartier koster mer å male, og å animere `text-shadow` maler teksten på nytt i hver bilderute. Vil du animere en overskrift, flytt den med `transform` og la skyggen stå fast.

## FAQ

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

`text-shadow: offset-x offset-y blur-radius color`, for eksempel `2px 2px 4px #000`. Bare de to forskyvningene er påkrevd.

### Kan jeg legge til mer enn én tekstskygge?

Ja. Skill skyggene med komma. Den første i listen males oppå de andre.

### Har text-shadow en spredningsverdi?

Nei. Spredning og `inset` finnes bare på `box-shadow`. For å gjøre en tekstskygge tykkere legger du flere skygger i lag med små forskyvninger.

### Gjør text-shadow teksten mer tilgjengelig?

Ikke pålitelig. Kontrastsjekker ignorerer skygger, så teksten må nå påkrevd kontrast mot bakgrunnen uten en.

### Hvordan gjør jeg hvit tekst lesbar på et foto uten text-shadow?

Legg en mørk gradientscrim bak tekstområdet, gjør bildet mørkere, eller plasser ordene over en rolig del av fotoet.