Tailwind-kleurverlooptekst: klassen, v4-syntaxis, fixes

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.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

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: background-clip: text met een transparante vulling.

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 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.

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.

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.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

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 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.

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.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

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.

Houd kleurverlooptekst leesbaar

1. 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. 2

   Test het als lopende tekst

   Grote vette koppen hebben volgens WCAG minstens 3:1 tegen de pagina nodig. Kleurcontrast en toegankelijkheid heeft de volledige regels.

3. 3

   Gebruik gewicht

   Kleurverlopen lezen beter in vette en zware gewichten, waar meer vulling is om de kleur te tonen.

4. 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.