# Gradienttekst i Tailwind: klasser, v4-syntaks og løsninger
[Canonical HTML page](https://gradiently.design/da/guide/tailwind-gradient-text)
Fire utilities gør en overskrift til gradienttekst. Detaljerne omkring dem afgør, om den ser skarp eller afklippet ud. Her er klasserne til Tailwind v4 og v3 og de problemer, du vil møde.
## The short version
- Gradienttekst i Tailwind kræver en gradientbaggrund, `bg-clip-text` til at klippe den til bogstaverne og `text-transparent`, så baggrunden skinner igennem.
- I Tailwind v4 hedder gradientutilityen `bg-linear-to-r`, mens v3 bruger `bg-gradient-to-r`; farveklasserne from, via og to virker ens i begge.
- Tailwind v4 lader dig vælge interpolationsrummet med en modifikator som `bg-linear-to-r/oklch`, som holder midten af en gradient klar.
- Tilføj `box-decoration-clone`, når en gradientoverskrift brydes over flere linjer, og lidt polstring i bunden, når underlængder bliver skåret af.
- Tjek kontrasten for den lyseste farve i gradienten mod siden, for det er der, gradienttekst bliver svær at læse.
Du laver **gradienttekst i Tailwind** ved at lægge en gradient på elementet og klippe den til bogstaverne: `bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent`. Første del maler en gradientbaggrund, `bg-clip-text` beskærer baggrunden til tegnenes form, og `text-transparent` fjerner den ensfarvede tekstfarve, så gradienten skinner igennem. I Tailwind v3 skriver du `bg-gradient-to-r` i stedet for `bg-linear-to-r`; resten er det samme.
```html
Ship the quiet version
```
Hele effekten i én klasseliste. Rækkefølgen i class-attributten er ligegyldig.
## Sådan arbejder klasserne sammen
Det hjælper at vide, hvad hver utility kompileres til, for alle fejl med gradienttekst skyldes, at en af de fire dele mangler. Under motorhjelmen er det samme teknik som almindelig [gradienttekst i CSS](https://gradiently.design/da/guide/css-gradient-text): `background-clip: text` med en gennemsigtig fyldfarve.
| Utility | Hvad den sætter | Hvis du glemmer den |
| --- | --- | --- |
| `bg-linear-to-r` | En lineær gradient mod højre | Slet ingen gradient |
| `from-*` `via-*` `to-*` | Farvestoppene | Gennemsigtige stop eller standardstop |
| `bg-clip-text` | `background-clip: text` | En farvet boks bag ensfarvet tekst |
| `text-transparent` | `color: transparent` | Ensfarvet tekst dækker gradienten |
De fire dele af gradienttekst i Tailwind og det symptom, hver af dem efterlader, når den mangler.
Retninger følger de sædvanlige endelser: `-to-r`, `-to-br`, `-to-b` og så videre. Version 4 accepterer også en vinkel som `bg-linear-45` eller `bg-linear-135` og tilføjer `bg-radial` og `bg-conic`, som også virker til tekst. Har du ikke brugt gradientutilities meget, gennemgår [gradienter i Tailwind](https://gradiently.design/da/guide/tailwind-gradient) baggrunde i dybden.
## Klassenavne i Tailwind v4 og v3
Den største ændring i v4 er navnet på den lineære utility. `bg-gradient-to-r` blev til `bg-linear-to-r` for at passe ind ved siden af de nye radiale og koniske utilities. Det gamle navn kompilerer stadig i v4 af hensyn til kompatibilitet, men ny kode bør bruge det nye.
| Det, du vil have | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Fra venstre mod højre | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonal | `bg-linear-to-br` eller `bg-linear-45` | `bg-gradient-to-br` |
| Radial | `bg-radial` | Kun vilkårlig værdi |
| Konisk | `bg-conic` | Kun vilkårlig værdi |
| OKLCH-blanding | `bg-linear-to-r/oklch` | Ikke tilgængelig |
| Klip til tekst | `bg-clip-text` | `bg-clip-text` |
Side om side, så du kan se, hvilken version et kodeuddrag, du har fundet online, er skrevet til.
## Eksempler på gradienttekst, du kan kopiere
Tre eller fire farver, der ligger tæt på hinanden på farvehjulet, giver den reneste gradienttekst. Modsætninger virker højrøstede og kan blive grå på midten. Disse kombinationer bruger farver fra standardpaletten, som er beskrevet i [Tailwind-farver](https://gradiently.design/da/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 etiket viser stoppene i rækkefølge: det første i `from-*`, et midterste i `via-*`, det sidste i `to-*`. 600-nuancerne holder nok kontrast på en hvid side; på en mørk side skifter du til 300 eller 400. Hexværdierne er fra v3-paletten; OKLCH-versionerne i v4 ser meget ens ud.
Stoppositioner flytter, hvor hver farve sidder. `from-20% via-50% to-80%` holder ensfarvede ender på en lang overskrift, hvilket ser roligere ud end en blanding, der starter allerede på første bogstav.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Stoppositioner, en interpolationsmodifikator og en helt egen gradient. Vilkårlige værdier virker i både v3 og v4.
Blå til gul er en god test af interpolation. Blandet i sRGB går den gennem en grålig grøn; blandet i OKLCH forbliver den klar. [CSS-gradienter i OKLCH](https://gradiently.design/da/guide/css-gradient-oklch) forklarer hvorfor.
## Sådan løser du almindelige problemer med gradienttekst
### Overskrifter over flere linjer
Som standard spænder gradienten over hele elementets boks, så en overskrift, der brydes, får én udstrakt gradient, hvor anden linje har en anden farve end første. Tilføj `box-decoration-clone` for at give hver linje sin egen fulde gradient, eller `inline-block` for at krympe boksen til teksten.
### Afskårne underlængder
Stram linjeafstand som `leading-none` kan skære bunden af et g eller y, fordi baggrunden slutter ved linjeboksen. Tilføj `pb-1`, eller løsn linjeafstanden en smule.
### Mørk tilstand
En gradient afstemt til hvidt papir ser mudret ud på en mørk side. Giv den sine egne nuancer med varianter: `from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300`. Samme tankegang gælder baggrunde, som gennemgås i [gradienter til mørk tilstand](https://gradiently.design/da/guide/dark-mode-gradients).
### Undgå
- Gradienttekst på lange afsnit
- Et blegt stop, der forsvinder på hvid
- Komplementærfarver med en grå midte
- Gradienttekst oven på en gradientbaggrund
- At udelade en ensfarvet farve til markeret tekst
### Gør
- Gem den til en overskrift eller et enkelt ord
- Tjek det lyseste stop mod siden
- Nabonuancer eller OKLCH-interpolation
- Ensfarvet bund bag gradientord
- Sæt `selection:text-white selection:bg-violet-600`
## Sådan animerer du gradienttekst i Tailwind
Et langsomt skær opstår, når en baggrund dobbelt så bred som teksten glider sidelæns. I v4 definerer du animationen inde i `@theme`, så bliver den til en `animate-*`-utility.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Tilføj derefter `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` til overskriften, og gentag den første farve som sidste stop, så løkken ikke hopper.
Brug den højst én gang på en side. Bevægelse trækker blikket, hvilket er pointen ved en lanceringsoverskrift og en plage alle andre steder. Mønstret er det samme som i [animerede CSS-gradienter](https://gradiently.design/da/guide/css-animated-gradient).
## Hold gradienttekst læsbar
1. **Find det svageste stop** Den lyseste farve på en lys side, eller den mørkeste på en mørk side, bestemmer den kontrast, du faktisk får.
2. **Test den som brødtekst** Store fede overskrifter skal have mindst 3:1 mod siden ifølge WCAG. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) har alle reglerne.
3. **Brug vægten** Gradienter læses bedre i fede og tunge snit, hvor der er mere fyld til at vise farven.
4. **Stop ved få ord** Én overskrift eller ét fremhævet ord. Alt længere begynder at ligne en renderingsfejl.
Gradienttekst er en webteknik. Når opgaven er et opslag på sociale medier eller et banner, og du hellere vil have gradienten bag ordene, flytter Gradiently Marks deres roligste område bag teksten og vælger lyst eller mørkt blæk linje for linje, så ordene kan læses, uden at du skal teste hvert stop.
## FAQ
### Hvordan laver jeg gradienttekst i Tailwind?
Tilføj en gradient med `bg-linear-to-r` (eller `bg-gradient-to-r` i v3), farvestop med `from-*` og `to-*` og derefter `bg-clip-text` og `text-transparent`.
### Hvorfor vises min gradienttekst i Tailwind ikke?
Som regel mangler `text-transparent`, så ensfarvet tekst dækker gradienten, eller også mangler `bg-clip-text`, så gradienten fylder en boks bag ordene. Tjek, at alle fire dele sidder på samme element.
### Hvad har erstattet bg-gradient-to-r i Tailwind v4?
Den lineære utility hedder nu `bg-linear-to-r`. Det gamle navn virker stadig af hensyn til kompatibilitet, og v4 tilføjer `bg-radial`, `bg-conic` og vinkelutilities som `bg-linear-45`.
### Hvordan undgår jeg, at gradienttekst skærer bogstaver som g og y af?
Tilføj lidt polstring i bunden som `pb-1`, eller løsn linjehøjden, fordi den klippede baggrund slutter ved linjeboksen.
### Er gradienttekst tilgængelig?
Det kan den være, hvis alle dele af gradienten opfylder kontrastkravene mod siden. Test det lyseste stop, og hold gradienttekst til overskrifter.