# Tekstskygge: hvornår den hjælper, og de bedre alternativer

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

Slagskyggen er den mest almindelige løsning på ulæselig tekst og en af de hurtigste måder at få et design til at se gammeldags ud på. Her er, hvornår en skygge er det rigtige valg, og hvad du skal gribe efter resten af tiden.

## The short version

- En tekstskygge virker bedst som en bevidst stil, for eksempel en hård, forskudt skygge uden sløring, snarere end som en løsning på dårlig kontrast.
- Bløde gløder og slørede glorier bag bogstaverne udvisker deres kanter og får tit et design til at se billigt og gammeldags ud.
- En tynd, stram skygge er et fornuftigt valg til undertekster på video i bevægelse, hvor baggrunden ikke kan styres.
- For at gøre tekst læselig slår placering, en gradient-scrim, en tonet baggrund og et federe snit som regel enhver skygge.
- I CSS tager text-shadow en vandret forskydning, en lodret forskydning, en valgfri sløringsradius og en farve, og den accepterer flere skygger adskilt med kommaer.

En **tekstskygge** hjælper i to situationer: som en bevidst stil, som regel en hård skygge forskudt nogle få pixels uden sløring, og som en tynd sikkerhedskant på undertekster over video i bevægelse. Som redning af ord, der ikke kan læses på et foto eller en gradient, gør den som regel skade: bløde skygger og gløder udvisker netop de kanter, øjet bruger til at genkende bogstaver, og de gør et design gammeldags med det samme. For læsbarhedens skyld skal du flytte ordene til et roligere område, tilføje en gradient-scrim, tone baggrunden eller vælge et federe snit.

## Typer af tekstskyggeeffekter

| Type | Hvordan den ser ud | Vurdering |
| --- | --- | --- |
| Hård forskydning | En massiv kopi af bogstaverne flyttet ned og til højre, uden sløring | En stærk stil: retro, legende, plakatagtig |
| Lang skygge | Mange forskudte kopier, der danner en diagonal blok | En stil tæt på 3D-ekstrudering; brug den på få ord |
| Diskret slagskygge | Lille forskydning, lille sløring, lav opacitet | Næsten usynlig på de fleste skærme; ofte meningsløs |
| Stram kant til undertekster | Lidt eller ingen forskydning, kort sløring, mørk | Fin til undertekster over uforudsigelig video |
| Blød glød eller glorie | En bred, sløret sky af farve omkring hvert bogstav | Undgå: tvær bogstaverne ud og ser billig ud |

Kun de to første er designvalg. De to midterste er værktøjer. Den sidste er en vane, det er værd at bryde.

## Hvornår en tekstskygge hjælper

### Som en hård, forskudt stil

En skygge uden sløring, forskudt nogle få procent af bogstavhøjden og sat i en kontrastfarve fra paletten, er en typografisk stil med en lang historie på plakater, emballage og skilte. Den virker selvsikker og en anelse nostalgisk. Behandl den som enhver effekt: én pr. design, få store ord, et tungt snit. [Teksteffekter](https://gradiently.design/da/guide/text-effects) sammenligner den med de andre behandlinger. [Retro-teksteffekter](https://gradiently.design/da/guide/retro-text-effect) viser dens nære slægtninge, den dobbelte og sporet.

### Bag undertekster på video

Undertekster sidder over optagelser, der skifter i hvert billede, så du kan ikke vælge et roligt område. En stram, mørk skygge eller en tynd kontur holder hvide undertekster læselige, når et lyst vindue passerer bag dem. Hold den tæt på bogstaverne: kort sløring og lidt eller ingen forskydning. [Design af undertekster til video](https://gradiently.design/da/guide/video-captions-design) dækker størrelse og placering.

## Hvornår en tekstskygge skader

Problemet med at bruge en skygge til at rette kontrast er, at den behandler symptomet. Baggrunden er stadig travl; du har bare tilføjet en tværet kant omkring bogstaverne. Bløde gløder er de værste syndere, fordi de spreder en sløret sky ud over hvert bogstav og blødgør den kant, der definerer dets form. På opslag på sociale medier komprimeres de også dårligt og bliver til plettede striber.

### Skygge som krykke

- Blød sort glød på hvid tekst over et foto
- Farvet glorie omkring en overskrift
- Skygge på lille brødtekst
- Flere forskellige skygger i ét design
- Skygge plus kontur plus glød på ét ord

### Bedre valg

- Flyt ordene til det roligste område
- En gradient-scrim langs én kant af billedet
- Større, federe skrift til den lille linje
- Én konsekvent stil på tværs af sættet
- Én behandling, valgt med vilje

## Bedre alternativer til en tekstskygge

1. **Flyt ordene** Find det roligste, mest ensartede område af baggrunden, og sæt teksten der. Det løser de fleste problemer, før de opstår.
2. **Tilføj en gradient-scrim** En blød overgang fra mørk til klar langs én kant giver kontrast uden en synlig form. [Læselig tekst på fotos](https://gradiently.design/da/guide/readable-text-on-photos) har koder til scrims.
3. **Gør baggrunden roligere** Ton et foto i en eller to farver, sænk højlysene, eller vælg en gradient med et mere stille område.
4. **Styrk skriften** Gå et snit og en størrelse op. En fed sans i en generøs størrelse behøver ingen hjælp på de fleste baggrunde.
5. **Skift blækket** Nogle gange slår mørk tekst på et lyst område hvid tekst med skygge. Vælg blækket linje for linje i stedet for til hele designet.

Et stående opslag med teksten Åbent til sent, hvor baggrunden løber ujævnt bag bogstaverne

Ord over et travlt stykke baggrund: det er her, folk griber efter en glød.

Det samme opslag med rene bogstaver og ingen skygge, sat over et roligt område af gradienten

De samme ord med baggrunden gjort rolig bag dem. Ingen skygge nødvendig, og bogstaverne forbliver skarpe.

På gradienter bliver bunden ofte lysere eller mørkere hen over billedet, så én blækfarve passer ikke til alle linjer. [Tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) viser, hvordan du planlægger efter det, og [skrift på travle baggrunde](https://gradiently.design/da/guide/type-on-busy-backgrounds) dækker mønstre og teksturer.

## Tekstskygge i CSS

CSS-egenskaben `text-shadow` tager en vandret forskydning, en lodret forskydning, en valgfri sløringsradius og en farve. Adskil flere skygger med kommaer; den første på listen ligger øverst. Brug `em`-enheder, så skyggen skalerer med skriftstørrelsen. Den fulde reference findes på [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

To skygger, der er værd at have, og den scrim, der erstatter resten.

Automatiske kontrasttjek sammenligner tekstfarven med baggrundsfarven og ignorerer skyggen. Hvis et værktøj markerer din tekst som lav kontrast, kan en skygge få den til at se bedre ud på din skærm, men den ændrer ikke målingen. Ret i stedet baggrunden eller blækket. [Tekstskygge i CSS](https://gradiently.design/da/guide/css-text-shadow) har flere opskrifter til nettet.

## Sådan håndterer Gradiently læsbarhed

Gradiently er bygget på idéen om, at ord ikke skal reddes. En Mark ved, hvor ordene står: dens roligste område med bedst kontrast flytter sig bag teksten, farverne nær bogstaverne bliver dybere eller lysere, og travle detaljer falder til ro. Automatisk tekstfarve vælger derefter lys eller mørk skrift til hver linje ud fra Markens egen palet. Der er ingen bokse, skygger eller sløring involveret, og du vælger, hvor kraftigt Marken reagerer. Vil du have dybde som stil, giver bogstavbehandlingen Dybde dybe bogstaver i Markens farver, og Dobbelt tegner åbne bogstaver to gange, begge skarpe og uden sløring.

## FAQ

### Skal jeg bruge en tekstskygge for at gøre tekst læselig?

Som regel ikke. Placering, en gradient-scrim, en roligere baggrund eller et federe snit gør tekst læselig uden at udviske bogstaverne.

### Hvad er en hård skygge på tekst?

En kopi af bogstaverne forskudt nedad og til den ene side uden sløring, som regel i en kontrastfarve. Det er en bevidst stil, man ser på plakater og emballage.

### Hvordan tilføjer jeg en tekstskygge i CSS?

Brug `text-shadow: 0.06em 0.06em 0 #9a3412;`, hvor værdierne er vandret forskydning, lodret forskydning, sløringsradius og farve.

### Forbedrer en tekstskygge kontrasten for tilgængeligheden?

Automatiske tjek sammenligner tekstfarven med baggrunden og ignorerer skyggen, så en skygge retter ikke et forhold, der dumper. Ret baggrunden eller blækket.

### Hvorfor ser glødende teksteffekter billige ud?

En glød spreder en sløret sky omkring hvert bogstav, blødgør dets kanter og giver ofte striber, når billedet komprimeres.