Gradienttekst i Tailwind: klasser, v4-syntaks og løsninger

For å lage gradienttekst i Tailwind, legg en gradient på elementet og klipp den til bokstavene: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. Første del maler en gradientbakgrunn, bg-clip-text klipper bakgrunnen til tegnenes form, og text-transparent fjerner den heldekkende tekstfargen slik at gradienten viser gjennom. I Tailwind v3 skriver du bg-gradient-to-r i stedet for bg-linear-to-r. Resten er identisk.

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

Slik virker klassene sammen

Det hjelper å vite hva hver klasse kompileres til, fordi alle feil med gradienttekst skyldes at en av de fire delene mangler. Under panseret er dette samme teknikk som vanlig gradienttekst i CSS: background-clip: text med gjennomsiktig fyll.

Retninger følger vanlige endelser: -to-r, -to-br, -to-b og så videre. Versjon 4 tar også vinkler, som bg-linear-45 eller bg-linear-135, og legger til bg-radial og bg-conic, som også fungerer for tekst. Hvis du har brukt gradientklassene lite, dekker Tailwind-gradienter bakgrunner grundig.

Klassenavn i Tailwind v4 og v3

Den største endringen i v4 er navnet på den lineære klassen. bg-gradient-to-r ble bg-linear-to-r for å stå sammen med de nye radielle og koniske klassene. Det gamle navnet kompileres fortsatt i v4 for kompatibilitet, men ny kode bør bruke det nye.

Eksempler på gradienttekst du kan kopiere

Tre eller fire farger som ligger nær hverandre på fargesirkelen, gir renest gradienttekst. Motsetninger virker høylytte og kan bli grå i midten. Disse kombinasjonene bruker farger fra standardpaletten, beskrevet i Tailwind-farger.

Stopplasseringer flytter hvor hver farge ligger. from-20% via-50% to-80% beholder ensfarge i begge ender av en lang overskrift, noe som virker roligere enn en blanding som starter på første bokstav.

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

Blått til gult er en god interpolasjonstest. Blandet i sRGB går den gjennom grågrønt. Blandet i OKLCH forblir den livlig. CSS-gradienter i OKLCH forklarer hvorfor.

Løs vanlige problemer med gradienttekst

Overskrifter over flere linjer

Som standard strekker gradienten seg over hele elementboksen. En overskrift med linjeskift får dermed én strukket gradient, med en annen farge på andre linje enn på første. Legg til box-decoration-clone for å gi hver linje sin egen fulle gradient, eller inline-block for å krympe boksen til teksten.

Avkuttede underlengder

Tett linjeavstand som leading-none kan kutte bunnen av g eller y, fordi bakgrunnen slutter ved linjeboksen. Legg til pb-1 eller øk linjeavstanden litt.

Mørk modus

En gradient tilpasset hvitt papir virker grumsete på mørk side. Gi den egne toner med varianter: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. Samme tanke gjelder bakgrunner, dekket i gradienter i mørk modus.

Animer gradienttekst i Tailwind

Et langsomt skimmer kommer fra en bakgrunn dobbelt så bred som teksten, som glir sidelengs. I v4 definerer du animasjonen inne i @theme, og den blir en animate-*-klasse.

@import "tailwindcss";

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

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

Bruk det høyst én gang på siden. Bevegelse trekker øyet, som er poenget med en lanseringsoverskrift og en plage alle andre steder. Mønsteret er det samme som i animerte CSS-gradienter.

Hold gradienttekst lesbar

1. 1

   Finn det svakeste stoppet

   Den lyseste fargen på lys side, eller den mørkeste på mørk side, bestemmer kontrasten du faktisk får.

2. 2

   Test den som brødtekst

   Store, fete overskrifter trenger minst 3:1 mot siden etter WCAG. Fargekontrast og tilgjengelighet gir alle reglene.

3. 3

   Bruk vekt

   Gradienter leses bedre i fet og tung skrift, der det er mer fyll som viser fargen.

4. 4

   Stopp ved noen få ord

   Én overskrift eller ett fremhevet ord. Alt lengre begynner å ligne en gjengivelsesfeil.

Gradienttekst er en teknikk for nettet. Når oppgaven er et sosialt innlegg eller banner og du vil ha gradienten bak ordene, flytter Marks fra Gradiently det roligste området bak teksten og velger lys eller mørk tekstfarge for hver linje. Da kan ordene leses uten at du tester alle stopp.