Texto com gradiente em CSS, bem feito

O texto com gradiente em CSS é feito pintando um gradiente como fundo do elemento de texto, recortando esse fundo no formato das letras com background-clip: text e deixando o próprio texto transparente para o gradiente aparecer. São três declarações, funciona em todos os navegadores atuais e continua sendo texto de verdade, 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 de errado: alternativas ausentes, contraste, texto em várias linhas, descendentes cortadas e a questão de design de quando o texto com gradiente ajuda. Para o visual de letras com gradiente em redes sociais e trabalhos de marca, e não na web, veja efeitos de texto.

Uma receita robusta de texto com gradiente, com alternativas

Se um navegador aplica o color: transparent, mas não o recorte, o texto some. Proteja-se: dê ao elemento uma cor sólida tirada do gradiente e só troque para a versão transparente quando o navegador confirmar o suporte. Acrescente uma redefinição para o modo de cores forçadas, em que o sistema substitui suas cores e o texto precisa 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 do MDN sobre background-clip documenta o valor text e seu suporte atual.

Contraste: confira as duas pontas do gradiente

Um verificador de contraste recebe uma cor de texto, mas o texto com gradiente tem várias. As palavras são tão legíveis quanto sua parte mais fraca, então confira a parada mais clara e a mais escura contra o fundo, e olhe o meio também, porque uma mistura em sRGB pode ficar mais clara ou mais sem graça que qualquer das pontas. Para texto grande de destaque, o WCAG pede pelo menos 3:1; para texto normal, 4,5:1. Contraste de cores explica as razões.

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

Em um elemento inline que quebra, o navegador estende um só fundo por todas as linhas como se fossem uma única tira, então a primeira linha recebe o começo do gradiente e a última recebe o fim. Em geral você quer que cada linha carregue o gradiente completo. O box-decoration-break: clone faz isso. Em elementos de bloco, como um título, o gradiente já abrange a caixa inteira, então um gradiente longo em um 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;
}

As descendentes cortadas são a outra surpresa. O fundo só pinta a caixa do elemento, então, com um line-height muito justo, as partes das letras que ficam abaixo dela ficam transparentes e somem. Uma altura de linha de cerca de 1,1 ou um pouco de padding embaixo resolve. Fontes de destaque em itálico podem perder a ponta da última letra à direita pelo mesmo motivo; um toque de padding inline 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 em um título atrai o olhar; um parágrafo inteiro dele cansa. Pesos fortes ajudam, porque traços finos não mostram cor suficiente para se lerem como gradiente. Se o resto da página já usa fundos em gradiente, tipografia lisa costuma ser a escolha mais forte; texto sobre fundos em gradiente trata desse caso.

Animando texto com gradiente

Para fazer a cor fluir pelas letras, deixe o fundo maior que o texto e mova-o. Dê a ele 200% de largura e anime o background-position de ida e volta com alternate, para nunca haver um salto quando o ciclo recomeça. Respeite as configurações de movimento reduzido e mantenha lento: um brilho a cada poucos segundos parece acabamento, um ciclo rápido parece 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 modo mais amplo, e contornos em vez de preenchimentos com gradiente estão em bordas com gradiente em CSS.