Gradienttekst i CSS, gjort riktig

Gradienttekst i CSS lages ved å male en gradient som bakgrunn på tekstelementet, klippe bakgrunnen til bokstavformene med background-clip: text og gjøre selve teksten gjennomsiktig så gradienten skinner gjennom. Det tar tre deklarasjoner, virker i alle gjeldende nettlesere og forblir ekte, markerbar, søkbar tekst i stedet for et bilde.

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

Resten av denne guiden tar for seg det versjonen på tre linjer gjør galt: manglende reserver, kontrast, tekst på flere linjer, avklippede nedstrekene og designspørsmålet om når gradienttekst i det hele tatt hjelper. For uttrykket til gradientbokstaver i sosiale medier og merkevarearbeid i stedet for på nettet, se teksteffekter.

En robust oppskrift på gradienttekst med reserver

Hvis en nettleser bruker color: transparent men ikke klippingen, forsvinner teksten. Sikre deg mot det: gi elementet en heldekkende farge hentet fra gradienten, og bytt til den gjennomsiktige versjonen først når nettleseren bekrefter støtte. Legg til en tilbakestilling for tvungne farger, der systemet erstatter fargene dine og teksten må forbli 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-siden om background-clip dokumenterer verdien text og dens gjeldende støtte.

Kontrast: sjekk begge ender av gradienten

En kontrastsjekker tar én tekstfarge, men gradienttekst har mange. Ordene er bare så lesbare som den svakeste delen, så sjekk det lyseste og det mørkeste stoppet mot bakgrunnen, og se på midten også, for en sRGB-blanding kan bli lysere eller mattere enn begge ender. For stor visningstekst krever WCAG minst 3:1, og for vanlig tekst 4,5:1. Fargekontrast forklarer forholdene.

Retting av gradienttekst på flere linjer og avklippede bokstaver

På et innebygd element som brytes, legger nettleseren én bakgrunn over alle linjene som om de var en enkelt stripe, så første linje får starten av gradienten og siste linje får enden. Som regel vil du at hver linje skal bære hele gradienten. box-decoration-break: clone gjør det. På blokkelementer, som en overskrift, spenner gradienten allerede over hele boksen, så en lang gradient over en bred overskrift kan bare vise midten 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;
}

Avklippede nedstrekene er den andre overraskelsen. Bakgrunnen maler bare elementets boks, så med en veldig stram line-height blir delene av bokstaver som henger under den, stående gjennomsiktige og forsvinner. En linjehøyde på omtrent 1,1 eller litt padding nederst retter det. Kursive visningsskrifter kan miste tuppen på siste bokstav til høyre av samme grunn, og litt indre padding hjelper.

Når gradienttekst fungerer, og når den ikke gjør det

En god regel: gradienttekst er en aksent, som kursiv. Ett uthevet ord i en overskrift drar blikket, mens et helt avsnitt av det sliter det ut. Tunge snitt hjelper, for tynne streker viser ikke nok farge til å leses som en gradient. Hvis resten av siden allerede bruker gradientbakgrunner, er flat skrift som regel det sterkeste valget, og tekst på gradientbakgrunner tar for seg det tilfellet.

Å animere gradienttekst

For å få farge til å flyte gjennom bokstavene gjør du bakgrunnen større enn teksten og flytter den. Gjør den 200 % bred og animer background-position fram og tilbake med alternate, så det aldri blir et hopp der løkken starter på nytt. Respekter innstillinger for redusert bevegelse, og hold den langsom: en skimring hvert par sekund leses som finpuss, mens en rask syklus leses 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 bakgrunnstriksene driver animerte gradienter i CSS mer generelt, og gradientomriss i stedet for fyll er omtalt i gradientkanter i CSS.