# Tekstskygge: når den hjelper og bedre alternativer

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

Slagskygge er den vanligste løsningen på uleselig tekst og en av de raskeste måtene å få design til å virke utdatert. Her er når skygge er riktig, og hva du heller bør bruke ellers.

## The short version

- Tekstskygge fungerer best som bevisst stil, som en hard forskjøvet skygge uten uskarphet, fremfor løsning på dårlig kontrast.
- Myk glød og uskarpe glorier bak bokstavene visker ut kantene og får gjerne designet til å virke billig og utdatert.
- En tynn, tett skygge er rimelig for undertekster på bevegelig video der bakgrunnen ikke kan styres.
- For lesbar tekst slår plassering, gradientslør, tonet bakgrunn og tyngre skrift vanligvis alle skygger.
- I CSS tar text-shadow vannrett og loddrett forskyvning, valgfri uskarphetsradius og farge, og støtter flere skygger adskilt med komma.

En **tekstskygge** hjelper i to situasjoner: som bevisst stil, vanligvis en hard skygge forskjøvet noen piksler uten uskarphet, og som en tynn sikkerhetskant på undertekster over bevegelig video. Som redning for ord som ikke kan leses på foto eller gradient, skader den vanligvis: myke skygger og glød visker ut kantene øyet bruker for å kjenne igjen bokstaver og daterer designet straks. For lesbarhet, flytt ordene til et roligere område, legg til et gradientslør, ton bakgrunnen eller velg tyngre skrift.

## Typer tekstskygge

| Type | Utseende | Vurdering |
| --- | --- | --- |
| Hard forskyvning | En heldekkende kopi av bokstavene flyttet ned og til høyre, uten uskarphet | En sterk stil: retro, leken, plakataktig |
| Lang skygge | Mange forskjøvne kopier som danner en diagonal blokk | En stil nær 3D-uttrekk, bruk på få ord |
| Diskret slagskygge | Liten forskyvning, litt uskarphet, lav opasitet | Knapt synlig på de fleste skjermer, ofte unødvendig |
| Tett undertekstkant | Liten eller ingen forskyvning, kort uskarphet, mørk | Greit for undertekster på uforutsigbar video |
| Myk glød eller glorie | En bred, uskarp fargesky rundt hver bokstav | Unngå: gjør bokstavene uklare og virker billig |

Bare de to første er designvalg. De to midterste er verktøy. Den siste er en vane verdt å bryte.

## Når tekstskygge hjelper

### Som hard, forskjøvet stil

En skygge uten uskarphet, forskjøvet noen prosent av bokstavhøyden i en kontrastfarge fra paletten, er en typografisk stil med lang historie på plakater, emballasje og skilt. Den virker selvsikker og litt nostalgisk. Behandle den som enhver effekt: én per design, noen få store ord og tung skrift. [Teksteffekter](https://gradiently.design/nb/guide/text-effects) sammenligner med andre behandlinger. [Retro teksteffekter](https://gradiently.design/nb/guide/retro-text-effect) viser slektningene Dobbel og Spor.

### Bak undertekster på video

Undertekster ligger over opptak som endres i hvert bilde, så du kan ikke velge et rolig område. En tett, mørk skygge eller tynn kontur holder hvite undertekster lesbare når et lyst vindu passerer bak. Hold den nær bokstavene: kort uskarphet og liten eller ingen forskyvning. [Design av videoundertekster](https://gradiently.design/nb/guide/video-captions-design) dekker størrelse og plassering.

## Når tekstskygge skader

Problemet med skygge som kontrastløsning er at den behandler symptomet. Bakgrunnen er fortsatt travel, du har bare lagt en flekk rundt bokstavene. Myk glød er verst, fordi den sprer en uskarp sky utenfor hver bokstav og myker opp kanten som definerer formen. I sosiale innlegg komprimeres den også dårlig og blir flekkete bånd.

### Skygge som krykke

- Myk svart glød rundt hvit tekst på foto
- Farget glorie rundt en overskrift
- Skygge på liten brødtekst
- Flere ulike skygger i ett design
- Skygge, kontur og glød på ett ord

### Bedre valg

- Flytt ordene til det roligste området
- Et gradientslør langs én bildekant
- Større, tyngre skrift for den lille linjen
- Én konsekvent stil i hele settet
- Én behandling valgt bevisst

## Bedre alternativer til tekstskygge

1. **Flytt ordene** Finn det roligste, jevneste området i bakgrunnen og legg teksten der. Det løser de fleste problemer før de begynner.
2. **Legg til et gradientslør** En myk overgang fra mørkt til gjennomsiktig langs én kant gir kontrast uten synlig form. [Lesbar tekst på foto](https://gradiently.design/nb/guide/readable-text-on-photos) gir koder.
3. **Ro bakgrunnen** Ton et bilde i én eller to farger, senk høylysene eller velg en gradient med et roligere område.
4. **Styrk skriften** Gå opp én vekt og størrelse. En romslig, fet grotesk trenger ikke hjelp på de fleste bakgrunner.
5. **Bytt tekstfarge** Noen ganger slår mørk tekst på lyst område hvit tekst med skygge. Velg tekstfarge per linje fremfor for hele designet.

Et stående innlegg med Åpent sent der bakgrunnen går ujevnt bak bokstavene

Ord over en travel bakgrunnsdel: det er nå folk gjerne velger glød.

Samme innlegg med rene bokstaver uten skygge, på et rolig gradientområde

Samme ord med bakgrunnen roet bak dem. Ingen skygge trengs, og bokstavene forblir skarpe.

Særlig på gradienter blir bakgrunnen ofte lysere eller mørkere gjennom bildet, så én tekstfarge passer ikke alle linjer. [Tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) viser planleggingen, og [skrift på travle bakgrunner](https://gradiently.design/nb/guide/type-on-busy-backgrounds) dekker mønstre og teksturer.

## Tekstskygge i CSS

CSS-egenskapen `text-shadow` tar vannrett forskyvning, loddrett forskyvning, valgfri uskarphetsradius og farge. Skill flere skygger med komma. Den første ligger øverst. Bruk `em`-enheter så skyggen skaleres med skriftstørrelsen. Hele referansen finnes 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 verdt å ha og sløret som erstatter resten.

Automatiske kontrastverktøy sammenligner tekstfargen med bakgrunnsfargen og ignorerer skyggen. Hvis verktøyet melder lav kontrast, kan skygge få teksten til å se bedre ut på skjermen, men målingen endres ikke. Rett bakgrunn eller tekstfarge i stedet. [CSS-tekstskygge](https://gradiently.design/nb/guide/css-text-shadow) har flere nettoppskrifter.

## Slik håndterer Gradiently lesbarhet

Gradiently ble bygd på ideen om at ord ikke skal trenge redning. En Mark vet hvor ordene står: det roligste området med best kontrast flytter seg bak teksten, farger nær bokstavene blir dypere eller lysere, og travle detaljer roes ned. Auto-tekstfarge velger deretter lys eller mørk skrift for hver linje fra Markens palett. Ingen bokser, skygger eller uskarphet er involvert, og du velger reaksjonsstyrken. Vil du ha dybde som stil, gir bokstavbehandlingen Uttrekk dype bokstaver i Markens farger, mens Dobbel tegner åpne bokstaver to ganger. Begge er skarpe og uten uskarphet.

## FAQ

### Bør jeg bruke tekstskygge for å gjøre tekst lesbar?

Vanligvis ikke. Plassering, gradientslør, roligere bakgrunn eller tyngre skrift gjør teksten lesbar uten å viske ut bokstavene.

### Hva er hard skygge på tekst?

En kopi av bokstavene forskjøvet ned og til én side uten uskarphet, vanligvis i en kontrastfarge. Det er en bevisst stil fra plakater og emballasje.

### Hvordan legger jeg til tekstskygge i CSS?

Bruk `text-shadow: 0.06em 0.06em 0 #9a3412;`, der verdiene er vannrett forskyvning, loddrett forskyvning, uskarphetsradius og farge.

### Gir tekstskygge bedre tilgjengelighetskontrast?

Automatiske verktøy sammenligner tekstfargen med bakgrunnen og ignorerer skyggen. Skygge retter derfor ikke et for svakt forhold. Rett bakgrunn eller tekstfarge.

### Hvorfor virker glødende teksteffekter billige?

Glød sprer en uskarp sky rundt hver bokstav, myker opp kantene og får ofte bånd når bildet komprimeres.