# CSS text-shadow: syntaxis, voorbeelden en betere opties

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

text-shadow is een kleine eigenschap met een grote reputatie als redder van onleesbare koppen. Het is beter in decoratie dan in redden. Hier staan de syntaxis, een handvol stijlen om te kopiëren en wat je gebruikt als leesbaarheid het echte probleem is.

## The short version

- De CSS-eigenschap text-shadow neemt een horizontale verschuiving, een verticale verschuiving, een optionele blurstraal en een kleur.
- Meerdere schaduwen kunnen op één stuk tekst worden gestapeld door ze met komma’s te scheiden, en de eerst genoemde wordt bovenop getekend.
- Anders dan box-shadow heeft text-shadow geen spreidingswaarde en geen inset-sleutelwoord.
- Harde verschoven schaduwen zonder blur zijn de nuttigste decoratieve stijl, van retrokoppen tot lange schaduwen.
- Een zachte donkere schaduw is een zwakke oplossing voor tekst over een drukke afbeelding; een scrim, een donkerder beeld of een rustigere achtergrond doet het werk goed.

Een **CSS text-shadow** schrijf je als `text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4)`: een horizontale verschuiving, een verticale verschuiving, een optionele blurstraal en een kleur. Scheid meerdere schaduwen met komma’s om ze te stapelen. Het is uitstekend voor decoratieve effecten zoals scherp verschoven koppen, lange schaduwen en nepranden. Het is een slecht middel om tekst leesbaar te maken over een drukke foto, en de betere opties daarvoor staan verderop.

## text-shadow-syntaxis

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

De volledige grammatica in vijf regels. Lengtes mogen negatief zijn om de schaduw omhoog of naar links te gooien.

| Onderdeel | Verplicht | Wat het doet |
| --- | --- | --- |
| Horizontale verschuiving | Ja | Positief verplaatst de schaduw naar rechts, negatief naar links |
| Verticale verschuiving | Ja | Positief verplaatst hem omlaag, negatief omhoog |
| Blurstraal | Nee | Standaard 0, een harde rand. Kan niet negatief zijn |
| Kleur | Nee | Standaard de tekstkleur, `currentcolor` |

Er is hier geen spreiding en geen `inset`. Die horen bij [box-shadow](https://gradiently.design/nl/guide/css-box-shadow), dat de box van het element beschaduwt in plaats van zijn letters.

De schaduw wordt achter de tekst getekend en neemt de vorm van elk teken aan, inclusief onderstrepingen en decoraties. Hij verandert de layout niet: een grote verschuiving kan buiten het element lopen en buren overlappen zonder ze weg te duwen, dus laat ruimte met padding als de schaduw groot is.

## Voorbeelden van text-shadow om te kopiëren

De stijlen die standhouden zijn de scherpe. Een schaduw zonder blur leest als een bewuste grafische keuze; een zachte grijze blur onder lopende tekst leest eerder als een fout.

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

Vijf stijlen die werken. De lange schaduw is gewoon dezelfde harde schaduw, elke keer een pixel verder herhaald.

Retroverschuivingen en lange schaduwen komen visueel aan bod in [retro-teksteffecten](https://gradiently.design/nl/guide/retro-text-effect) en [3D-teksteffecten](https://gradiently.design/nl/guide/3d-text-effect). Voor een nette omlijning kies je `-webkit-text-stroke` met `paint-order: stroke fill` boven de oude truc van vier schaduwen op elke hoek, die gaten laat op bochten; [omlijnde tekst](https://gradiently.design/nl/guide/outline-text) toont beide.

- Indigo letters: #1e1b4b
- Roze verschuiving: #f472b6
- Crèmekleurige letters: #fff7ed
- Oranje eerste stap: #f97316
- Roestbruine tweede stap: #7c2d12

De kleuren achter de retro- en dubbele-verschuivingsvoorbeelden. Verschoven schaduwen werken het best als de schaduwkleur duidelijk anders is dan de letters, niet een donkerdere kopie ervan.

## Waarom een zachte schaduw een zwakke leesbaarheidsoplossing is

Het gangbare gebruik van `text-shadow` is een donkere blur achter witte tekst over een foto, in de hoop de twee te scheiden. Het helpt een beetje aan de randen van elke letter en doet niets voor de ruimte erin, waar de foto nog op volle sterkte doorschijnt. Duw de blur en dekking op tot het werkt en je krijgt een veeg rond elk woord. Gloeden rond tekst, licht of donker, zien er gedateerd uit en falen nog steeds op de helderste delen van het beeld.

Contrastcontroles negeren schaduwen ook. Ze meten de tekstkleur tegen de achtergrondkleur, dus een kop die alleen slaagt dankzij zijn schaduw wordt in een audit afgekeurd, en terecht. De drempels staan in [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility).

### Schaduw als kruk

- Een vervaagde zwarte halo achter witte tekst
- Faalt overal waar het beeld het helderst is
- Contrasttools melden nog steeds een fout
- Modderige randen op kleine tekst

### Herstel de achtergrond

- Een verloopscrim onder de woorden
- Verdonker het beeld of verzadig het minder
- Verplaats tekst naar het rustigste gebied
- Kies een achtergrond die is ontworpen om woorden te dragen

## Betere opties voor tekst op afbeeldingen en verlopen

Een scrim is een verloop dat alleen het deel van de afbeelding achter de tekst verdonkert en elders naar niets vervaagt. Hij houdt de foto helder waar het ertoe doet en geeft elke letter dezelfde rustige ondergrond. [Verloopoverlays in CSS](https://gradiently.design/nl/guide/css-gradient-overlay) behandelt het lagen volledig.

Scrim onderaan voor bijschriften: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Donker onderaan, helder vanaf tweederde omhoog. Leg hem over een foto en zet bijschrifttekst in het onderste derde.

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

De scrim als bovenste achtergrondlaag, de foto eronder. Geen schaduw nodig op de tekst.

Andere betrouwbare opties: haal de afbeelding op een eigen laag door `filter: brightness(0.75)`, snij zo bij dat de woorden op lucht of muur vallen in plaats van op details, of zet de tekst op een effen balk. [Tekst over afbeeldingen](https://gradiently.design/nl/guide/text-over-image) loopt elk met voorbeelden door.

Een staande post met een crèmekleurige kop die over een heldere plek in het verloop loopt en contrast verliest

Lichte woorden over het helderste deel van de achtergrond. Een schaduw zou het probleem alleen vervagen.

Dezelfde staande post met het verloop dat dieper wordt achter de kop zodat hij duidelijk leest

De achtergrond wordt in plaats daarvan dieper achter de regel, zodat de woorden leesbaar zijn zonder enig effect erop.

Dit is precies het werk dat de Marks van Gradiently zelf doen: het rustigste gebied verplaatst zich achter je woorden en Auto-inkt kiest regel voor regel lichte of donkere letters, zonder schaduw, vak of blur. Wil je schaduw als decoratie in plaats van reparatie, dan geven de lettering-behandelingen zoals Extrusie, Dubbel en Spoor je verschoven stijlen zonder één schaduw te schrijven.

## Text-shadow op verlooptekst

Verlooptekst wordt gemaakt met `background-clip: text` en een transparante tekstkleur. Voeg er een `text-shadow` aan toe en de schaduw schijnt recht door de transparante letters, wat het verloop van binnenuit vertroebelt. De oplossing is in plaats daarvan het element te beschaduwen: `filter: drop-shadow(3px 3px 0 #1e1b4b)` volgt de getekende vorm van de letters en ligt erachter. De techniek zelf staat in [verlooptekst in CSS](https://gradiently.design/nl/guide/css-gradient-text).

> **Eén schaduw per drop-shadow()** `drop-shadow()` neemt één schaduw per functie, maar je kunt er meerdere aaneenschakelen: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Elke schaduw werkt op het resultaat van de vorige.

## Prestaties en animatie

Harde schaduwen zijn goedkoop. Grote blurstralen op lange stukken tekst kosten meer om te tekenen, en `text-shadow` animeren tekent de tekst bij elk frame opnieuw. Wil je een kop laten animeren, verplaats hem dan met `transform` en houd de schaduw vast.

## FAQ

### Wat is de syntaxis voor text-shadow in CSS?

`text-shadow: offset-x offset-y blur-radius color`, bijvoorbeeld `2px 2px 4px #000`. Alleen de twee verschuivingen zijn verplicht.

### Kan ik meer dan één text-shadow toevoegen?

Ja. Scheid schaduwen met komma’s. De eerste in de lijst wordt bovenop de andere getekend.

### Heeft text-shadow een spreidingswaarde?

Nee. Spreiding en `inset` bestaan alleen bij `box-shadow`. Om een tekstschaduw te verdikken stapel je meerdere schaduwen met kleine verschuivingen.

### Verbetert text-shadow de toegankelijkheid?

Niet betrouwbaar. Contrastcontroles negeren schaduwen, dus tekst moet zonder schaduw het vereiste contrast met zijn achtergrond halen.

### Hoe maak ik witte tekst leesbaar op een foto zonder text-shadow?

Leg een donkere verloopscrim achter het tekstgebied, verdonker de afbeelding of zet de woorden over een rustig deel van de foto.