Tekst met kleurverloop in CSS, goed gedaan

Tekst met kleurverloop in CSS maak je door een kleurverloop als achtergrond van het tekstelement te schilderen, die achtergrond met background-clip: text tot de lettervormen bij te snijden en de tekst zelf transparant te maken, zodat het kleurverloop erdoorheen schijnt. Het kost drie declaraties, werkt in elke huidige browser en blijft echte, selecteerbare, doorzoekbare tekst in plaats van een afbeelding.

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

De rest van deze gids behandelt wat de versie van drie regels fout doet: ontbrekende terugvallen, contrast, meerregelige tekst, afgesneden staarten van letters en de ontwerpvraag wanneer tekst met kleurverloop zelfs helpt. Voor de look van letters met kleurverloop op sociale media en in merkwerk in plaats van op het web, zie teksteffecten.

Een robuust recept voor tekst met kleurverloop, met terugvallen

Past een browser color: transparent toe maar niet de clip, dan verdwijnt de tekst. Vang dat op: geef het element een effen kleur uit het kleurverloop en schakel pas over op de transparante versie als de browser ondersteuning bevestigt. Voeg een reset toe voor de modus met geforceerde kleuren, waar het systeem je kleuren vervangt en de tekst zichtbaar moet blijven.

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

De MDN-pagina over background-clip documenteert de waarde text en de huidige ondersteuning.

Contrast: controleer beide uiteinden van het kleurverloop

Een contrastchecker neemt één tekstkleur, maar tekst met kleurverloop heeft er veel. De woorden zijn maar zo leesbaar als hun zwakste deel, dus controleer de lichtste en de donkerste stop tegen de achtergrond, en kijk ook naar het midden, want een sRGB-overgang kan lichter of doffer worden dan beide uiteinden. Voor grote displaytekst vraagt WCAG minstens 3:1; voor normale tekst 4,5:1. Kleurcontrast legt de verhoudingen uit.

Meerregelige tekst met kleurverloop en afgesneden letters oplossen

Op een inline-element dat omgebroken wordt legt de browser één achtergrond over alle regels alsof het één strook is, dus de eerste regel krijgt het begin van het kleurverloop en de laatste het eind. Meestal wil je dat elke regel het volledige kleurverloop draagt. box-decoration-break: clone doet dat. Bij blokelementen, zoals een kop, beslaat het kleurverloop al het hele vak, dus een lang kleurverloop over een brede kop kan op korte regels alleen zijn midden tonen.

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

Afgesneden staarten zijn de andere verrassing. De achtergrond schildert alleen het vak van het element, dus bij een heel krappe line-height blijven de delen van letters die eronder hangen transparant en verdwijnen. Een regelhoogte van ongeveer 1,1 of een beetje padding onderaan lost het op. Cursieve displaylettertypen kunnen om dezelfde reden de punt van hun laatste letter rechts verliezen; een tikje inline padding helpt.

Wanneer tekst met kleurverloop werkt, en wanneer niet

Een goede regel: tekst met kleurverloop is een accent, zoals cursief. Eén gemarkeerd woord in een kop trekt het oog; een hele alinea ervan vermoeit het. Zware gewichten helpen, want dunne lijnen tonen niet genoeg kleur om als kleurverloop te lezen. Gebruikt de rest van de pagina al kleurverloopachtergronden, dan is vlakke tekst meestal de sterkere keuze; tekst op kleurverloopachtergronden behandelt dat geval.

Tekst met kleurverloop animeren

Om kleur door de letters te laten stromen maak je de achtergrond groter dan de tekst en verplaats je hem. Maak hem 200% breed en animeer background-position heen en weer met alternate, zodat er nooit een sprong is waar de lus opnieuw begint. Respecteer de instellingen voor verminderde beweging en houd het traag: een glinstering om de paar seconden leest als afwerking, een snelle cyclus als een waarschuwing.

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

Dezelfde achtergrondtrucs drijven geanimeerde kleurverlopen in CSS in bredere zin, en contouren met kleurverloop in plaats van vullingen staan in CSS-kleurverloopborders.