# Tailwind gradienttext: klasser, v4-syntax och lösningar
[Canonical HTML page](https://gradiently.design/sv/guide/tailwind-gradient-text)
Fyra verktygsklasser förvandlar en rubrik till gradienttext. Detaljerna runt dem avgör om den ser skarp eller avklippt ut. Här är klasserna för Tailwind v4 och v3, och de problem du kommer att stöta på.
## The short version
- Gradienttext i Tailwind kräver en gradientbakgrund, `bg-clip-text` för att klippa den till bokstäverna och `text-transparent` så att bakgrunden syns igenom.
- I Tailwind v4 heter gradientklassen `bg-linear-to-r`, medan v3 använder `bg-gradient-to-r`. Färgklasserna from, via och to fungerar likadant i båda.
- Tailwind v4 låter dig välja interpolationsrymd med en modifierare som `bg-linear-to-r/oklch`, vilket håller gradientens mittpunkt ljus.
- Lägg till `box-decoration-clone` när en gradientrubrik bryts över flera rader, och lite utfyllnad nedtill när nedstaplarna klipps av.
- Kontrollera kontrasten mellan gradientens ljusaste färg och sidan, eftersom det är där gradienttext blir svår att läsa.
För att göra **gradienttext i Tailwind** lägger du en gradient på elementet och klipper den till bokstäverna: `bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent`. Den första delen målar en gradientbakgrund, `bg-clip-text` trimmar bakgrunden till glyfernas form och `text-transparent` tar bort den solida textfärgen så att gradienten syns igenom. I Tailwind v3 skriver du `bg-gradient-to-r` i stället för `bg-linear-to-r`, resten är identiskt.
```html
Ship the quiet version
```
Hela effekten i en klasslista. Ordningen i class-attributet spelar ingen roll.
## Så fungerar klasserna tillsammans
Det hjälper att veta vad varje klass kompileras till, eftersom varje fel med gradienttext beror på att en av de fyra delarna saknas. Under huven är det samma teknik som i vanlig [gradienttext med CSS](https://gradiently.design/sv/guide/css-gradient-text): `background-clip: text` med transparent fyllning.
| Klass | Vad den ställer in | Om du glömmer den |
| --- | --- | --- |
| `bg-linear-to-r` | En linjär gradient åt höger | Ingen gradient alls |
| `from-*` `via-*` `to-*` | Färgstoppen | Transparenta eller förvalda stopp |
| `bg-clip-text` | `background-clip: text` | En färgad ruta bakom solid text |
| `text-transparent` | `color: transparent` | Solid text täcker gradienten |
De fyra delarna av gradienttext i Tailwind och symptomet var och en ger när den saknas.
Riktningarna följer de vanliga ändelserna: `-to-r`, `-to-br`, `-to-b` och så vidare. Version 4 godtar också en vinkel, till exempel `bg-linear-45` eller `bg-linear-135`, och lägger till `bg-radial` och `bg-conic`, som också fungerar för text. Om du inte har använt gradientklasserna mycket går [Tailwind-gradienter](https://gradiently.design/sv/guide/tailwind-gradient) igenom bakgrunder på djupet.
## Klassnamn i Tailwind v4 och v3
Den största ändringen i v4 är namnet på den linjära klassen. `bg-gradient-to-r` blev `bg-linear-to-r`, för att passa ihop med de nya radiella och koniska klasserna. Det gamla namnet kompileras fortfarande i v4 av kompatibilitetsskäl, men ny kod bör använda det nya.
| Det du vill ha | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Från vänster till höger | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonal | `bg-linear-to-br` eller `bg-linear-45` | `bg-gradient-to-br` |
| Radiell | `bg-radial` | Bara godtyckligt värde |
| Konisk | `bg-conic` | Bara godtyckligt värde |
| OKLCH-blandning | `bg-linear-to-r/oklch` | Finns inte |
| Klipp till text | `bg-clip-text` | `bg-clip-text` |
Sida vid sida, så att du kan se vilken version ett kodavsnitt du hittat på nätet är skrivet för.
## Exempel på gradienttext som du kan kopiera
Tre eller fyra färger som ligger nära varandra på hjulet ger den renaste gradienttexten. Motsatser ser starka ut och kan bli grå i mitten. De här kombinationerna använder färger från standardpaletten, som beskrivs i [Tailwind-färger](https://gradiently.design/sv/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%)`
Varje etikett listar stoppen i ordning: det första hamnar i `from-*`, ett i mitten i `via-*` och det sista i `to-*`. Nyanserna 600 behåller tillräcklig kontrast på en vit sida, och på en mörk sida byter du till 300 eller 400. Hexvärdena kommer från v3-paletten, och v4:s OKLCH-versioner ser mycket lika ut.
Stopppositioner flyttar var varje färg ligger. `from-20% via-50% to-80%` behåller solid färg i båda ändar av en lång rubrik, vilket ser lugnare ut än en blandning som börjar på första bokstaven.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Stopppositioner, en interpolationsmodifierare och en helt egen gradient. Godtyckliga värden fungerar i v3 och v4.
Blått till gult är ett bra test av interpolation. Blandat i sRGB passerar det en grönaktig grå, blandat i OKLCH förblir det levande. [CSS-gradienter i OKLCH](https://gradiently.design/sv/guide/css-gradient-oklch) förklarar varför.
## Lösningar på vanliga problem med gradienttext
### Rubriker över flera rader
Som standard sträcker sig gradienten över hela elementets ruta, så en rubrik som bryts får en utdragen gradient där andra raden har en annan färg än den första. Lägg till `box-decoration-clone` så får varje rad sin egen hela gradient, eller `inline-block` för att krympa rutan till texten.
### Avklippta nedstaplar
Tät radhöjd som `leading-none` kan skära av nederdelen på ett g eller y, eftersom bakgrunden slutar vid radrutan. Lägg till `pb-1` eller öka radhöjden något.
### Mörkt läge
En gradient som är justerad för vitt papper ser grumlig ut på en mörk sida. Ge den egna nyanser med varianter: `from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300`. Samma tänkande gäller bakgrunder, som tas upp i [gradienter i mörkt läge](https://gradiently.design/sv/guide/dark-mode-gradients).
### Undvik
- Gradienttext i långa stycken
- Ett blekt stopp som försvinner på vitt
- Komplementfärger med en grå mitt
- Gradienttext ovanpå en gradientbakgrund
- Att utelämna en solid färg för markerad text
### Gör så här
- Spara den till en rubrik eller ett enda ord
- Kontrollera det ljusaste stoppet mot sidan
- Närliggande nyanser, eller OKLCH-interpolation
- Solid botten bakom gradientord
- Sätt `selection:text-white selection:bg-violet-600`
## Animera gradienttext i Tailwind
Ett långsamt skimmer kommer från en bakgrund som är dubbelt så bred som texten och glider i sidled. I v4 definierar du animationen i `@theme` och den blir en `animate-*`-klass.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Lägg sedan till `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` på rubriken och upprepa den första färgen som sista stopp så att loopen inte hoppar.
Använd det högst en gång på en sida. Rörelse drar blicken till sig, vilket är poängen för en lanseringsrubrik och ett störmoment överallt annars. Mönstret är detsamma som i [animerade CSS-gradienter](https://gradiently.design/sv/guide/css-animated-gradient).
## Håll gradienttexten läsbar
1. **Hitta det svagaste stoppet** Den ljusaste färgen på en ljus sida, eller den mörkaste på en mörk, avgör den kontrast du faktiskt får.
2. **Testa den som brödtext** Stora feta rubriker behöver minst 3:1 mot sidan enligt WCAG. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) har alla regler.
3. **Använd tjocklek** Gradienter läses bättre i fetare snitt, där det finns mer yta att visa färgen på.
4. **Stanna vid några få ord** En rubrik eller ett betonat ord. Allt längre börjar se ut som ett renderingsfel.
Gradienttext är en webbteknik. När jobbet är ett inlägg i sociala medier eller en banner och du vill ha gradienten bakom orden i stället flyttar Marks från Gradiently sin lugnaste yta bakom texten och väljer ljus eller mörk färg rad för rad, så att orden går att läsa utan att du testar varje stopp.
## FAQ
### Hur gör jag gradienttext i Tailwind?
Lägg till en gradient med `bg-linear-to-r` (eller `bg-gradient-to-r` i v3), färgstopp med `from-*` och `to-*`, och sedan `bg-clip-text` och `text-transparent`.
### Varför syns inte min gradienttext i Tailwind?
Oftast saknas `text-transparent`, så att solid text täcker gradienten, eller `bg-clip-text`, så att gradienten fyller en ruta bakom orden. Kontrollera att alla fyra delarna sitter på samma element.
### Vad ersatte bg-gradient-to-r i Tailwind v4?
Den linjära klassen heter nu `bg-linear-to-r`. Det gamla namnet fungerar fortfarande av kompatibilitetsskäl, och v4 lägger till `bg-radial`, `bg-conic` och vinkelklasser som `bg-linear-45`.
### Hur hindrar jag gradienttext från att skära av bokstäver som g och y?
Lägg till lite utfyllnad nedtill, till exempel `pb-1`, eller öka radhöjden, eftersom den klippta bakgrunden slutar vid radrutan.
### Är gradienttext tillgänglig?
Det kan den vara, om varje del av gradienten uppfyller kontrastkraven mot sidan. Testa det ljusaste stoppet och spara gradienttext till rubriker.