# Tekstschaduw: wanneer het helpt en de betere alternatieven

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

De slagschaduw is de meest gebruikte oplossing voor onleesbare tekst en een van de snelste manieren om een ontwerp gedateerd te laten ogen. Dit is wanneer een schaduw de juiste keuze is, en wat je de rest van de tijd pakt.

## The short version

- Een tekstschaduw werkt het best als bewuste stijl, zoals een harde verschoven schaduw zonder vervaging, en niet als oplossing voor slecht contrast.
- Zachte gloed en vage halo’s achter letters vervagen hun randen en laten een ontwerp vaak goedkoop en gedateerd ogen.
- Een dunne, strakke schaduw is een redelijke keuze voor ondertitels op bewegende video, waar je de achtergrond niet kunt sturen.
- Om tekst leesbaar te maken verslaan plaatsing, een verloopscrim, een getinte achtergrond en een zwaarder gewicht meestal elke schaduw.
- In CSS neemt text-shadow een horizontale verschuiving, een verticale verschuiving, een optionele vervagingsstraal en een kleur, en accepteert meerdere schaduwen gescheiden door komma’s.

Een **tekstschaduw** helpt in twee situaties: als bewuste stijl, meestal een harde schaduw een paar pixels verschoven zonder vervaging, en als dunne veiligheidsrand op ondertitels over bewegende video. Als redmiddel voor woorden die niet lezen op een foto of kleurverloop doet het meestal pijn: zachte schaduwen en gloed vervagen precies de randen waaraan je oog letters herkent, en ze laten een ontwerp meteen gedateerd ogen. Verplaats voor leesbaarheid de woorden naar een rustiger gebied, voeg een verloopscrim toe, tint de achtergrond of kies een zwaarder gewicht.

## Soorten tekstschaduweffecten

| Type | Hoe het eruitziet | Oordeel |
| --- | --- | --- |
| Hard verschoven | Een massieve kopie van de letters naar beneden en rechts verschoven, geen vervaging | Een sterke stijl: retro, speels, postervormig |
| Lange schaduw | Veel verschoven kopieën die een diagonaal blok vormen | Een stijl, dicht bij 3D-extrusie; gebruik bij een paar woorden |
| Subtiele slagschaduw | Kleine verschuiving, kleine vervaging, lage dekking | Op de meeste schermen nauwelijks zichtbaar; vaak zinloos |
| Strakke ondertitelrand | Weinig of geen verschuiving, korte vervaging, donker | Prima voor ondertitels over onvoorspelbare video |
| Zachte gloed of halo | Een brede, vage wolk van kleur rond elke letter | Vermijd: smeert de letters uit en oogt goedkoop |

Alleen de eerste twee zijn ontwerpkeuzes. De middelste twee zijn hulpmiddelen. De laatste is een gewoonte die je beter afleert.

## Wanneer een tekstschaduw helpt

### Als harde, verschoven stijl

Een schaduw zonder vervaging, een paar procent van de lettershoogte verschoven en in een contrasterende kleur uit het palet, is een typografische stijl met een lange geschiedenis op posters, verpakkingen en bewegwijzering. Het leest als zelfverzekerd en een beetje nostalgisch. Behandel het als elk effect: één per ontwerp, een paar grote woorden, een zwaar lettertype. [Teksteffecten](https://gradiently.design/nl/guide/text-effects) vergelijkt het met de andere behandelingen. [Retro-teksteffecten](https://gradiently.design/nl/guide/retro-text-effect) toont zijn nauwe verwanten, de dubbele en de sleep.

### Achter ondertitels op video

Ondertitels staan over beeld dat elk frame verandert, dus je kunt geen rustig gebied kiezen. Een strakke, donkere schaduw of een dunne omlijning houdt witte ondertitels leesbaar als er een helder raam achter voorbij komt. Houd hem dicht bij de letters: een korte vervaging en weinig of geen verschuiving. [Ontwerp van videoondertitels](https://gradiently.design/nl/guide/video-captions-design) behandelt grootte en plaatsing.

## Wanneer een tekstschaduw schaadt

Het probleem met een schaduw om contrast te herstellen is dat hij het symptoom behandelt. De achtergrond is nog steeds druk; je hebt alleen een veeg rond de letters toegevoegd. Zachte gloed is de ergste, omdat hij een vage wolk voorbij elke letter uitspreidt en de rand verzacht die de vorm bepaalt. Op socialposts comprimeren ze ook slecht en worden ze vlekkerige banden.

### Schaduw als kruk

- Zachte zwarte gloed op witte tekst over een foto
- Gekleurde halo rond een kop
- Schaduw op kleine lopende tekst
- Meerdere verschillende schaduwen in één ontwerp
- Schaduw plus omlijning plus gloed op één woord

### Betere keuze

- De woorden naar het rustigste gebied verplaatsen
- Een verloopscrim langs één rand van het beeld
- Grotere, zwaardere letters voor de kleine regel
- Eén consistente stijl door de set
- Eén behandeling, bewust gekozen

## Betere alternatieven voor een tekstschaduw

1. **Verplaats de woorden** Zoek het rustigste, meest gelijkmatige deel van de achtergrond en zet de tekst daar. Dat lost de meeste problemen op voordat ze beginnen.
2. **Voeg een verloopscrim toe** Een zachte overgang van donker naar helder langs één rand geeft contrast zonder zichtbare vorm. [Leesbare tekst op foto’s](https://gradiently.design/nl/guide/readable-text-on-photos) heeft scrimcodes.
3. **Kalmeer de achtergrond** Tint een foto in een of twee kleuren, verlaag de hoge lichten of kies een kleurverloop met een rustiger gebied.
4. **Versterk de letters** Ga een gewicht en een grootte omhoog. Een vette schreefloze letter in een royale grootte heeft op de meeste achtergronden geen hulp nodig.
5. **Verander de inkt** Soms wint donkere tekst op een licht gebied het van witte tekst met schaduw. Kies de inkt per regel in plaats van voor het hele ontwerp.

Een staande post met de tekst Open tot laat waarbij de achtergrond ongelijkmatig achter de letters loopt

Woorden over een drukke strook achtergrond: dit is het moment waarop mensen naar een gloed grijpen.

Dezelfde post met heldere letters en zonder schaduw, over een rustig gebied van het kleurverloop

Dezelfde woorden met de achtergrond gekalmeerd erachter. Geen schaduw nodig, en de letters blijven scherp.

Vooral op kleurverlopen wordt de ondergrond vaak lichter of donkerder door het beeld, dus één inktkleur past niet bij elke regel. [Tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) laat zien hoe je daarvoor plant, en [letters op drukke achtergronden](https://gradiently.design/nl/guide/type-on-busy-backgrounds) behandelt patronen en texturen.

## Tekstschaduw in CSS

De CSS-eigenschap `text-shadow` neemt een horizontale verschuiving, een verticale verschuiving, een optionele vervagingsstraal en een kleur. Scheid meerdere schaduwen met komma’s; de eerste die je noemt, ligt bovenop. Gebruik `em`-eenheden zodat de schaduw met de lettergrootte meeschaalt. De volledige referentie staat op [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;
}
```

Twee schaduwen die de moeite waard zijn, en de scrim die de rest vervangt.

Geautomatiseerde contrastcontroles vergelijken de tekstkleur met de achtergrondkleur en negeren de schaduw. Markeert een tool je tekst als laag contrast, dan kan een schaduw het op jouw scherm beter laten ogen maar verandert hij de meting niet. Los in plaats daarvan de achtergrond of de inkt op. [CSS-tekstschaduw](https://gradiently.design/nl/guide/css-text-shadow) heeft meer recepten voor het web.

## Hoe Gradiently omgaat met leesbaarheid

Gradiently is gebouwd op het idee dat woorden niet gered hoeven te worden. Een Mark weet waar de woorden staan: zijn rustigste, best contrasterende gebied schuift achter de tekst, kleuren bij de letters verdiepen of lichten op en drukke details komen tot rust. Auto-inkt kiest dan lichte of donkere letters per regel uit het eigen palet van de Mark. Er zijn geen vakken, schaduwen of vervaging mee gemoeid, en jij kiest hoe sterk de Mark reageert. Wil je diepte als stijl, dan geeft de letterbehandeling Extrusie diepe letters in de kleuren van de Mark en tekent Dubbel open letters twee keer, beide scherp en zonder vervaging.

## FAQ

### Moet ik een tekstschaduw gebruiken om tekst leesbaar te maken?

Meestal niet. Plaatsing, een verloopscrim, een rustiger achtergrond of een zwaarder gewicht maken tekst leesbaar zonder de letters te vervagen.

### Wat is een harde schaduw op tekst?

Een kopie van de letters naar beneden en opzij verschoven zonder vervaging, meestal in een contrasterende kleur. Het is een bewuste stijl die je ziet op posters en verpakkingen.

### Hoe voeg ik een tekstschaduw toe in CSS?

Gebruik `text-shadow: 0.06em 0.06em 0 #9a3412;` waarbij de waarden horizontale verschuiving, verticale verschuiving, vervagingsstraal en kleur zijn.

### Verbetert een tekstschaduw het contrast voor toegankelijkheid?

Geautomatiseerde controles vergelijken de tekstkleur met de achtergrond en negeren de schaduw, dus een schaduw herstelt geen falende verhouding. Los de achtergrond of de inkt op.

### Waarom zien gloeiende teksteffecten er goedkoop uit?

Een gloed spreidt een vage wolk rond elke letter, verzacht de randen en veroorzaakt vaak banding als het beeld wordt gecomprimeerd.