Gradienttext i CSS: så gör du den rätt

Gradienttext i CSS görs genom att en gradient målas som bakgrund på textelementet, den bakgrunden klipps till bokstavsformerna med background-clip: text och själva texten görs genomskinlig så att gradienten lyser igenom. Det tar tre deklarationer, fungerar i alla nuvarande webbläsare och förblir riktig, markerbar och sökbar text i stället för en bild.

.gradient-text {
  background-image: linear-gradient(90deg, #6d28d9, #be185d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Resten av den här guiden tar upp vad trerads-versionen gör fel: saknade reservlösningar, kontrast, text på flera rader, avklippta nedhäng och designfrågan om när gradienttext över huvud taget hjälper. För utseendet på gradientbokstäver i sociala medier och varumärkesarbete snarare än på webben, se texteffekter.

Ett robust recept för gradienttext med reservlösningar

Om en webbläsare tillämpar color: transparent men inte klippningen försvinner texten. Skydda dig: ge elementet en enfärgad färg hämtad från gradienten och växla sedan till den genomskinliga versionen först när webbläsaren bekräftar stöd. Lägg till en återställning för läget med tvingade färger, där systemet ersätter dina färger och texten måste förbli synlig.

.gradient-text {
  color: #6d28d9; /* solid fallback from the gradient */
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .gradient-text {
    background-image: linear-gradient(90deg, #6d28d9, #be185d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

@media (forced-colors: active) {
  .gradient-text {
    background: none;
    color: CanvasText;
  }
}

MDN:s sida om background-clip dokumenterar värdet text och dess nuvarande stöd.

Kontrast: kontrollera båda ändarna av gradienten

En kontrastkontroll tar en textfärg, men gradienttext har många. Orden är bara så läsbara som sin svagaste del, så kontrollera det ljusaste och det mörkaste stoppet mot bakgrunden och titta även på mitten, eftersom en sRGB-övergång kan dippa ljusare eller tråkigare än båda ändarna. För stor rubriktext kräver WCAG minst 3:1, för normal text 4,5:1. Färgkontrast förklarar förhållandena.

Åtgärda gradienttext på flera rader och avklippta bokstäver

På ett inline-element som radbryts lägger webbläsaren en enda bakgrund över alla rader som om de vore en enda remsa, så den första raden får gradientens början och den sista raden får slutet. Oftast vill du att varje rad ska bära hela gradienten. box-decoration-break: clone gör det. På blockelement, som en rubrik, spänner gradienten redan över hela rutan, så en lång gradient över en bred rubrik kan visa bara sin mitt på korta rader.

.gradient-text {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* stop descenders being cut off */
  line-height: 1.15;
  padding-block-end: 0.08em;
}

Avklippta nedhäng är den andra överraskningen. Bakgrunden målar bara elementets ruta, så med en mycket snäv line-height lämnas de delar av bokstäverna som hänger nedanför genomskinliga och försvinner. En radhöjd på ungefär 1,1 eller lite understa utfyllnad åtgärdar det. Kursiva rubriktypsnitt kan förlora spetsen på sin sista bokstav till höger av samma skäl, och lite utfyllnad i radriktningen hjälper.

När gradienttext fungerar och när den inte gör det

En bra tumregel: gradienttext är en accent, som kursiv stil. Ett markerat ord i en rubrik drar blicken, ett helt stycke av den tröttar den. Kraftiga vikter hjälper, eftersom tunna streck inte visar tillräckligt med färg för att läsas som en gradient. Om resten av sidan redan använder gradientbakgrunder är enfärgad text oftast det starkare valet. Text på gradientbakgrunder tar upp det fallet.

Att animera gradienttext

För att få färg att flöda genom bokstäverna gör du bakgrunden större än texten och flyttar den. Ge den 200 % bredd och animera background-position fram och tillbaka med alternate, så att det aldrig blir ett hopp där loopen startar om. Respektera inställningarna för reducerad rörelse och håll den långsam: ett skimmer med några sekunders mellanrum läses som finish, en snabb cykel läses som en varning.

.gradient-text--flow {
  background-image: linear-gradient(90deg, #6d28d9, #be185d, #c2410c);
  background-size: 200% 100%;
  animation: flow 6s ease-in-out infinite alternate;
}

@keyframes flow {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-text--flow { animation: none; }
}

Samma bakgrundstrick driver animerade gradienter i CSS mer generellt, och gradientkonturer i stället för fyllningar tas upp i CSS-gradientramar.