Texto com gradiente em CSS, bem feito

O texto com gradiente em CSS faz-se pintando um gradiente como fundo do elemento de texto, recortando esse fundo às formas das letras com background-clip: text e tornando o próprio texto transparente para que o gradiente apareça. Bastam três declarações, funciona em todos os navegadores atuais e continua a ser texto real, selecionável e pesquisável, e não uma imagem.

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

O resto deste guia trata do que a versão de três linhas faz mal: falta de alternativas, contraste, texto em várias linhas, descendentes cortados e a questão de design de quando o texto com gradiente ajuda sequer. Para o aspeto das letras com gradiente em redes sociais e trabalho de marca, e não na web, vê os efeitos de texto.

Uma receita robusta de texto com gradiente com alternativas

Se um navegador aplicar o color: transparent mas não o recorte, o texto desaparece. Protege-te: dá ao elemento uma cor lisa tirada do gradiente e passa depois à versão transparente só quando o navegador confirmar o suporte. Acrescenta uma reposição para o modo de cores forçadas, em que o sistema substitui as tuas cores e o texto tem de continuar visível.

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

A página da MDN sobre background-clip documenta o valor text e o seu suporte atual.

Contraste: verifica as duas pontas do gradiente

Um verificador de contraste recebe uma só cor de texto, mas o texto com gradiente tem muitas. As palavras só são tão legíveis como a sua parte mais fraca, por isso verifica a paragem mais clara e a mais escura contra o fundo, e olha também para o meio, porque uma mistura sRGB pode ficar mais clara ou mais baça do que qualquer das pontas. Para texto de destaque grande, as WCAG pedem pelo menos 3:1; para texto normal, 4,5:1. O guia sobre contraste de cor explica os rácios.

Corrigir texto com gradiente em várias linhas e letras cortadas

Num elemento em linha que quebra, o navegador estende um só fundo por todas as linhas como se fossem uma única tira, por isso a primeira linha fica com o início do gradiente e a última com o fim. Normalmente queres que cada linha leve o gradiente completo. O box-decoration-break: clone faz isso. Nos elementos de bloco, como um título, o gradiente já se estende por toda a caixa, por isso um gradiente longo num título largo pode mostrar só o meio nas linhas curtas.

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

Os descendentes cortados são a outra surpresa. O fundo só pinta a caixa do elemento, por isso com um line-height muito justo, as partes das letras que pendem por baixo ficam transparentes e desaparecem. Uma altura de linha de cerca de 1,1 ou um pouco de preenchimento em baixo resolve. Os tipos de letra de destaque em itálico podem perder a ponta da última letra à direita pela mesma razão; um toque de preenchimento em linha ajuda.

Quando o texto com gradiente funciona e quando não

Uma boa regra: o texto com gradiente é um destaque, como o itálico. Uma palavra realçada num título chama o olhar; um parágrafo inteiro cansa-o. Os pesos fortes ajudam, porque os traços finos não mostram cor suficiente para se lerem como um gradiente. Se o resto da página já usa fundos em gradiente, a tipografia lisa costuma ser a escolha mais forte; o guia sobre texto sobre fundos em gradiente trata desse caso.

Animar texto com gradiente

Para fazer a cor fluir pelas letras, faz o fundo maior do que o texto e move-o. Dá-lhe 200% de largura e anima o background-position para trás e para a frente com alternate, para nunca haver um salto quando o ciclo recomeça. Respeita as definições de movimento reduzido e mantém-no lento: um brilho a cada poucos segundos lê-se como acabamento, um ciclo rápido lê-se como um aviso.

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

Os mesmos truques de fundo alimentam os gradientes animados em CSS de forma mais geral, e os contornos com gradiente em vez de preenchimentos são tratados nas bordas com gradiente em CSS.