# Tailwind-kleurverlooptekst: klassen, v4-syntaxis, fixes
[Canonical HTML page](https://gradiently.design/nl/guide/tailwind-gradient-text)
Vier utilities maken van een kop een tekst met kleurverloop. De details eromheen bepalen of het scherp of afgeknipt oogt. Hier zijn de klassen voor Tailwind v4 en v3 en de problemen die je tegenkomt.
## The short version
- Tailwind-kleurverlooptekst heeft een kleurverloopachtergrond nodig, `bg-clip-text` om hem op de letters af te knippen en `text-transparent` zodat de achtergrond doorschijnt.
- In Tailwind v4 is de kleurverloop-utility `bg-linear-to-r`, terwijl v3 `bg-gradient-to-r` gebruikt; de kleurklassen from, via en to werken in beide hetzelfde.
- Tailwind v4 laat je de interpolatieruimte kiezen met een modifier zoals `bg-linear-to-r/oklch`, wat het middelpunt van een kleurverloop helder houdt.
- Voeg `box-decoration-clone` toe als een kop met kleurverloop over meerdere regels loopt, en wat padding onderaan als staarten worden afgesneden.
- Controleer het contrast van de lichtste kleur in het kleurverloop met de pagina, want daar wordt kleurverlooptekst moeilijk leesbaar.
Om **Tailwind-kleurverlooptekst** te maken, zet je een kleurverloop op het element en knip je het af op de letters: `bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent`. Het eerste deel schildert een kleurverloopachtergrond, `bg-clip-text` snijdt die achtergrond bij tot de vorm van de glyphs en `text-transparent` haalt de effen tekstkleur weg zodat het kleurverloop doorschijnt. Schrijf in Tailwind v3 `bg-gradient-to-r` in plaats van `bg-linear-to-r`; de rest is identiek.
```html
Ship the quiet version
```
Het hele effect in één klassenlijst. De volgorde binnen het class-attribuut doet er niet toe.
## Hoe de klassen samenwerken
Het helpt om te weten waartoe elke utility compileert, want elke bug met kleurverlooptekst komt doordat één van de vier delen ontbreekt. Onder de motorkap is dit dezelfde techniek als gewone [css-kleurverlooptekst](https://gradiently.design/nl/guide/css-gradient-text): `background-clip: text` met een transparante vulling.
| Utility | Wat het instelt | Als je het vergeet |
| --- | --- | --- |
| `bg-linear-to-r` | Een lineair kleurverloop naar rechts | Helemaal geen kleurverloop |
| `from-*` `via-*` `to-*` | De kleurstops | Transparante of standaardstops |
| `bg-clip-text` | `background-clip: text` | Een gekleurd vak achter effen tekst |
| `text-transparent` | `color: transparent` | Effen tekst bedekt het kleurverloop |
De vier delen van Tailwind-kleurverlooptekst en het symptoom dat elk achterlaat als het ontbreekt.
Richtingen volgen de gebruikelijke achtervoegsels: `-to-r`, `-to-br`, `-to-b` enzovoort. Versie 4 accepteert ook een hoek, zoals `bg-linear-45` of `bg-linear-135`, en voegt `bg-radial` en `bg-conic` toe, die ook voor tekst werken. Als je de kleurverloop-utilities nog niet veel hebt gebruikt, behandelt [Tailwind-kleurverlopen](https://gradiently.design/nl/guide/tailwind-gradient) achtergronden uitgebreid.
## Klassennamen in Tailwind v4 en v3
De grootste verandering in v4 is de naam van de lineaire utility. `bg-gradient-to-r` werd `bg-linear-to-r`, om naast de nieuwe radiale en conische utilities te staan. De oude naam compileert in v4 nog steeds voor compatibiliteit, maar nieuwe code moet de nieuwe gebruiken.
| Wat je wilt | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Van links naar rechts | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonaal | `bg-linear-to-br` of `bg-linear-45` | `bg-gradient-to-br` |
| Radiaal | `bg-radial` | Alleen willekeurige waarde |
| Conisch | `bg-conic` | Alleen willekeurige waarde |
| OKLCH-menging | `bg-linear-to-r/oklch` | Niet beschikbaar |
| Afknippen op tekst | `bg-clip-text` | `bg-clip-text` |
Naast elkaar, zodat je kunt zien voor welke versie een online gevonden snippet is geschreven.
## Voorbeelden van kleurverlooptekst om te kopiëren
Drie of vier kleuren die dicht bij elkaar op het wiel liggen maken de schoonste kleurverlooptekst. Tegenpolen zien er luid uit en kunnen in het midden grijs worden. Deze combinaties gebruiken kleuren uit het standaardpalet, beschreven in [Tailwind-kleuren](https://gradiently.design/nl/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Elk label noemt de stops in volgorde: de eerste gaat in `from-*`, een middelste in `via-*`, de laatste in `to-*`. De 600-tinten houden genoeg contrast op een witte pagina; wissel op een donkere pagina naar 300 of 400. De hexwaarden zijn het v3-palet; de OKLCH-versies van v4 lijken er sterk op.
Stoposities bepalen waar elke kleur zit. `from-20% via-50% to-80%` houdt effen kleur aan beide uiteinden van een lange kop, wat rustiger oogt dan een overgang die bij de eerste letter begint.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Stoposities, een interpolatiemodifier en een volledig eigen kleurverloop. Willekeurige waarden werken in v3 en v4.
Blauw naar geel is een goede test van interpolatie. In sRGB gemengd loopt het door een grijsachtig groen; in OKLCH gemengd blijft het levendig. [Css-kleurverlopen in OKLCH](https://gradiently.design/nl/guide/css-gradient-oklch) legt uit waarom.
## Veelvoorkomende problemen met kleurverlooptekst oplossen
### Koppen over meerdere regels
Standaard overspant het kleurverloop het hele elementvak, dus een kop die afbreekt krijgt één uitgerekt kleurverloop waarbij de tweede regel een andere kleur heeft dan de eerste. Voeg `box-decoration-clone` toe om elke regel een eigen volledig kleurverloop te geven, of `inline-block` om het vak tot de tekst te laten krimpen.
### Afgesneden staarten
Krappe regelafstand zoals `leading-none` kan de onderkant van een g of y wegsnijden, omdat de achtergrond bij het regelvak eindigt. Voeg `pb-1` toe of maak de regelafstand iets ruimer.
### Donkere modus
Een kleurverloop dat is afgestemd op wit papier ziet er op een donkere pagina modderig uit. Geef het eigen tinten met varianten: `from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300`. Hetzelfde geldt voor achtergronden, behandeld in [kleurverlopen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-gradients).
### Vermijden
- Kleurverlooptekst in lange alinea’s
- Een bleke stop die op wit verdwijnt
- Complementaire kleuren met een grijs midden
- Kleurverlooptekst bovenop een kleurverloopachtergrond
- Geen effen kleur instellen voor geselecteerde tekst
### Doen
- Bewaar het voor een kop of één woord
- Controleer de lichtste stop met de pagina
- Naburige tinten, of OKLCH-interpolatie
- Effen ondergrond achter woorden met kleurverloop
- Stel `selection:text-white selection:bg-violet-600` in
## Tailwind-kleurverlooptekst animeren
Een trage glans komt van een achtergrond die twee keer zo breed is als de tekst en zijwaarts schuift. Definieer in v4 de animatie binnen `@theme` en ze wordt een `animate-*`-utility.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Voeg dan `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` toe aan de kop en herhaal de eerste kleur als laatste stop, zodat de lus geen sprong heeft.
Gebruik het hooguit één keer op een pagina. Beweging trekt het oog, wat bij een lanceringskop de bedoeling is en overal elders hinderlijk. Het patroon is hetzelfde als in [geanimeerde css-kleurverlopen](https://gradiently.design/nl/guide/css-animated-gradient).
## Houd kleurverlooptekst leesbaar
1. **Vind de zwakste stop** De lichtste kleur op een lichte pagina, of de donkerste op een donkere, bepaalt het contrast dat je echt krijgt.
2. **Test het als lopende tekst** Grote vette koppen hebben volgens WCAG minstens 3:1 tegen de pagina nodig. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) heeft de volledige regels.
3. **Gebruik gewicht** Kleurverlopen lezen beter in vette en zware gewichten, waar meer vulling is om de kleur te tonen.
4. **Stop bij een paar woorden** Eén kop of één benadrukt woord. Alles wat langer is, begint op een renderfout te lijken.
Kleurverlooptekst is een webtechniek. Gaat het om een socialpost of banner en wil je het kleurverloop juist achter de woorden, dan verschuift een Gradiently Mark zijn rustigste vlak achter de tekst en kiest hij per regel lichte of donkere inkt, zodat de woorden leesbaar zijn zonder dat je elke stop test.
## FAQ
### Hoe maak ik kleurverlooptekst in Tailwind?
Voeg een kleurverloop toe met `bg-linear-to-r` (of `bg-gradient-to-r` in v3), kleurstops met `from-*` en `to-*`, en dan `bg-clip-text` en `text-transparent`.
### Waarom zie ik mijn Tailwind-kleurverlooptekst niet?
Meestal ontbreekt `text-transparent`, waardoor effen tekst het kleurverloop bedekt, of `bg-clip-text`, waardoor het kleurverloop een vak achter de woorden vult. Controleer of alle vier de delen op hetzelfde element staan.
### Wat verving bg-gradient-to-r in Tailwind v4?
De lineaire utility is nu `bg-linear-to-r`. De oude naam werkt nog voor compatibiliteit en v4 voegt `bg-radial`, `bg-conic` en hoekutilities zoals `bg-linear-45` toe.
### Hoe voorkom ik dat kleurverlooptekst letters als g en y afsnijdt?
Voeg wat padding onderaan toe, zoals `pb-1`, of maak de regelhoogte ruimer, omdat de afgeknipte achtergrond bij het regelvak eindigt.
### Is kleurverlooptekst toegankelijk?
Het kan, als elk deel van het kleurverloop voldoet aan de contrasteisen tegen de pagina. Test de lichtste stop en beperk kleurverlooptekst tot koppen.