Gradienttekst i CSS, gjort godt

Gradienttekst i CSS laves ved at male en gradient som baggrund på tekstelementet, klippe baggrunden til bogstavernes former med background-clip: text og gøre selve teksten gennemsigtig, så gradienten skinner igennem. Det kræver tre erklæringer, virker i alle nuværende browsere og forbliver rigtig, markérbar og søgbar tekst og ikke et billede.

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

Resten af denne guide handler om det, treliniers-versionen gør forkert: manglende reserver, kontrast, tekst over flere linjer, afskårne underlængder og designspørgsmålet om, hvornår gradienttekst overhovedet hjælper. For udtrykket i gradientbogstaver i sociale medier og brandarbejde frem for på nettet, se teksteffekter.

En robust opskrift på gradienttekst med reserver

Hvis en browser anvender color: transparent, men ikke klippet, forsvinder teksten. Sikr dig mod det: giv elementet en massiv farve hentet fra gradienten, og skift først til den gennemsigtige version, når browseren bekræfter understøttelse. Tilføj en nulstilling til tvunget farvetilstand, hvor systemet erstatter dine farver, og teksten skal forblive 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 side om background-clip dokumenterer værdien text og dens nuværende understøttelse.

Kontrast: tjek begge ender af gradienten

Et kontrastværktøj tager én tekstfarve, men gradienttekst har mange. Ordene er kun så læsbare som deres svageste del, så tjek det lyseste og det mørkeste stop mod baggrunden, og se også på midten, for en sRGB-blanding kan dykke lysere eller mattere end begge ender. Til stor displaytekst kræver WCAG mindst 3:1, til normal tekst 4,5:1. Farvekontrast forklarer forholdene.

Ret gradienttekst over flere linjer og afskårne bogstaver

På et inline-element, der ombrydes, lægger browseren én baggrund hen over alle linjerne, som var de én strimmel, så første linje får begyndelsen af gradienten og sidste linje får enden. Som regel vil du have, at hver linje bærer hele gradienten. box-decoration-break: clone gør det. På blokelementer som en overskrift dækker gradienten allerede hele boksen, så en lang gradient hen over en bred overskrift kan kun vise sin midte på korte linjer.

.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;
}

Afskårne underlængder er den anden overraskelse. Baggrunden maler kun elementets boks, så med en meget stram line-height bliver de dele af bogstaverne, der hænger under den, gennemsigtige og forsvinder. En linjehøjde på omkring 1,1 eller lidt padding forneden løser det. Kursive displayskrifter kan miste spidsen af det sidste bogstav til højre af samme grund. Lidt inline-padding hjælper.

Hvornår gradienttekst virker, og hvornår ikke

En god regel: gradienttekst er en accent, som kursiv. Ét fremhævet ord i en overskrift trækker blikket. Et helt afsnit af den trætter det. Tunge skriftsnit hjælper, for tynde streger viser ikke nok farve til at læses som en gradient. Bruger resten af siden allerede gradientbaggrunde, er flad typografi som regel det stærkeste valg. Tekst på gradientbaggrunde dækker det tilfælde.

Animér gradienttekst

For at få farve til at flyde gennem bogstaverne gør du baggrunden større end teksten og flytter den. Gør den 200 % bred, og animér background-position frem og tilbage med alternate, så der aldrig er et spring, hvor løkken genstarter. Respektér indstillinger for reduceret bevægelse, og hold den langsom: et glimmer hvert par sekunder læses som finish, en hurtig cyklus læses som en advarsel.

.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; }
}

De samme baggrundstricks driver animerede gradienter i CSS mere bredt, og gradientkonturer frem for fyld dækkes i CSS-gradientkanter.