# Gradienttekst i Tailwind: klasser, v4-syntaks og løsninger
[Canonical HTML page](https://gradiently.design/nb/guide/tailwind-gradient-text)
Fire hjelpeklasser gjør en overskrift til gradienttekst. Detaljene rundt avgjør om den blir skarp eller avkuttet. Her er klassene for Tailwind v4 og v3, og problemene du vil møte.
## The short version
- Gradienttekst i Tailwind trenger en gradientbakgrunn, `bg-clip-text` som klipper den til bokstavene, og `text-transparent` som lar bakgrunnen vise gjennom.
- I Tailwind v4 heter gradientklassen `bg-linear-to-r`, mens v3 bruker `bg-gradient-to-r`. Fargeklassene from, via og to fungerer likt i begge.
- Tailwind v4 lar deg velge interpolasjonsrom med en modifikator som `bg-linear-to-r/oklch`, som holder gradientens midtpunkt lyst.
- Legg til `box-decoration-clone` når overskriften brytes over flere linjer, og litt luft nederst når underlengder blir kuttet.
- Sjekk kontrasten mellom gradientens lyseste farge og siden. Det er der gradienttekst blir vanskelig å lese.
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.
```html
Ship the quiet version
```
Hele effekten i én klasseliste. Rekkefølgen i class-attributtet betyr ingenting.
## 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](https://gradiently.design/nb/guide/css-gradient-text): `background-clip: text` med gjennomsiktig fyll.
| Klasse | Hva den setter | Hvis du glemmer den |
| --- | --- | --- |
| `bg-linear-to-r` | En lineær gradient mot høyre | Ingen gradient |
| `from-*` `via-*` `to-*` | Fargestoppene | Gjennomsiktige stopp eller standardstopp |
| `bg-clip-text` | `background-clip: text` | En farget boks bak heldekkende tekst |
| `text-transparent` | `color: transparent` | Heldekkende tekst dekker gradienten |
De fire delene av gradienttekst i Tailwind, og symptomet hver gir når den mangler.
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](https://gradiently.design/nb/guide/tailwind-gradient) 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.
| Det du ønsker | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Venstre til høyre | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonalt | `bg-linear-to-br` eller `bg-linear-45` | `bg-gradient-to-br` |
| Radielt | `bg-radial` | Bare vilkårlig verdi |
| Konisk | `bg-conic` | Bare vilkårlig verdi |
| OKLCH-blanding | `bg-linear-to-r/oklch` | Ikke tilgjengelig |
| Klipp til tekst | `bg-clip-text` | `bg-clip-text` |
Side ved side, slik at du kan se hvilken versjon et kodeeksempel fra nettet er skrevet for.
## 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](https://gradiently.design/nb/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%)`
Hver etikett viser stoppene i rekkefølge: det første går i `from-*`, et mellomstopp i `via-*`, det siste i `to-*`. Tonene på 600 holder nok kontrast på hvit side. På mørk side bytter du til 300 eller 400. Hex-verdiene er fra v3-paletten. OKLCH-versjonene i v4 ser svært like ut.
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.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Stopplasseringer, interpolasjonsmodifikator og en helt egendefinert gradient. Vilkårlige verdier fungerer i både v3 og v4.
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](https://gradiently.design/nb/guide/css-gradient-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](https://gradiently.design/nb/guide/dark-mode-gradients).
### Unngå
- Gradienttekst i lange avsnitt
- Et lyst stopp som forsvinner på hvitt
- Komplementærfarger med grå midte
- Gradienttekst på gradientbakgrunn
- Å utelate en heldekkende farge for markert tekst
### Gjør
- Bruk det til en overskrift eller ett ord
- Sjekk det lyseste stoppet mot siden
- Nabokulører eller OKLCH-interpolasjon
- Ensfarget bakgrunn bak gradientord
- Sett `selection:text-white selection:bg-violet-600`
## 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.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Legg deretter `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` på overskriften, og gjenta første farge som siste stopp for en løkke uten hopp.
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](https://gradiently.design/nb/guide/css-animated-gradient).
## Hold gradienttekst lesbar
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. **Test den som brødtekst** Store, fete overskrifter trenger minst 3:1 mot siden etter WCAG. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) gir alle reglene.
3. **Bruk vekt** Gradienter leses bedre i fet og tung skrift, der det er mer fyll som viser fargen.
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.
## FAQ
### Hvordan lager jeg gradienttekst i Tailwind?
Legg til en gradient med `bg-linear-to-r` (eller `bg-gradient-to-r` i v3), fargestopp med `from-*` og `to-*`, deretter `bg-clip-text` og `text-transparent`.
### Hvorfor vises ikke gradientteksten min i Tailwind?
Vanligvis mangler `text-transparent`, slik at heldekkende tekst dekker gradienten, eller `bg-clip-text` mangler, slik at gradienten fyller en boks bak ordene. Sjekk at alle fire deler ligger på samme element.
### Hva erstattet bg-gradient-to-r i Tailwind v4?
Den lineære klassen heter nå `bg-linear-to-r`. Det gamle navnet fungerer fortsatt for kompatibilitet. v4 legger også til `bg-radial`, `bg-conic` og vinkelklasser som `bg-linear-45`.
### Hvordan hindrer jeg gradienttekst i å kutte bokstaver som g og y?
Legg til litt luft nederst med for eksempel `pb-1`, eller øk linjehøyden, fordi den klippede bakgrunnen slutter ved linjeboksen.
### Er gradienttekst tilgjengelig?
Den kan være det hvis alle deler av gradienten oppfyller kontrastkravet mot siden. Test det lyseste stoppet og bruk gradienttekst bare til overskrifter.