Texto com gradiente no Tailwind: classes, v4 e soluções

Para fazer texto com gradiente no Tailwind, põe um gradiente no elemento e recorta-o às letras: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. A primeira parte pinta um fundo em gradiente, o bg-clip-text recorta esse fundo à forma dos glifos e o text-transparent remove a cor sólida do texto para o gradiente aparecer. No Tailwind v3, escreve bg-gradient-to-r em vez de bg-linear-to-r; o resto é idêntico.

<h1 class="bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-5xl font-bold text-transparent">
  Ship the quiet version
</h1>

Como as classes funcionam em conjunto

Ajuda saber para que compila cada utilitário, porque todos os erros com texto em gradiente vêm de uma das quatro partes em falta. Por baixo é a mesma técnica do texto com gradiente em CSS: background-clip: text com preenchimento transparente.

As direções seguem os sufixos habituais: -to-r, -to-br, -to-b e assim por diante. A versão 4 também aceita um ângulo, como bg-linear-45 ou bg-linear-135, e acrescenta bg-radial e bg-conic, que também funcionam em texto. Se ainda usaste pouco os utilitários de gradiente, gradientes no Tailwind cobre os fundos em profundidade.

Nomes de classes no Tailwind v4 e v3

A maior mudança na v4 é o nome do utilitário linear. bg-gradient-to-r passou a bg-linear-to-r, para conviver com os novos utilitários radial e cónico. O nome antigo ainda compila na v4 por compatibilidade, mas o código novo deve usar o novo.

Exemplos de texto com gradiente para copiar

Três ou quatro cores próximas no círculo cromático dão o texto com gradiente mais limpo. Os opostos ficam ruidosos e podem ficar cinzentos a meio. Estas combinações usam cores da paleta predefinida, descrita em cores do Tailwind.

As posições das paragens mudam onde fica cada cor. from-20% via-50% to-80% mantém cor sólida nas duas pontas de um título comprido, o que fica mais calmo do que uma mistura que começa na primeira letra.

<!-- Stop positions -->
<h2 class="bg-linear-to-r from-cyan-600 from-20% via-blue-600 via-50% to-violet-600 to-80% bg-clip-text text-transparent">
  Plans for every team
</h2>

<!-- OKLCH interpolation keeps the middle bright -->
<h2 class="bg-linear-to-r/oklch from-blue-600 to-yellow-400 bg-clip-text text-transparent">
  Brighter in the middle
</h2>

<!-- Arbitrary gradient, underscores stand in for spaces -->
<h2 class="bg-[linear-gradient(100deg,#1e1b4b_0%,#7c3aed_60%,#f472b6_100%)] bg-clip-text text-transparent">
  Exactly your colours
</h2>

Do azul ao amarelo é um bom teste de interpolação. Misturado em sRGB passa por um verde acinzentado; misturado em OKLCH mantém-se vivo. Gradientes CSS em OKLCH explica porquê.

Resolver os problemas comuns do texto com gradiente

Títulos de várias linhas

Por predefinição o gradiente estende-se por toda a caixa do elemento, por isso um título que quebra fica com um só gradiente esticado e a segunda linha com cor diferente da primeira. Junta box-decoration-clone para dar a cada linha o seu gradiente completo, ou inline-block para encolher a caixa ao texto.

Descendentes cortados

Um entrelinhado apertado como leading-none pode cortar a base de um g ou de um y, porque o fundo termina na caixa da linha. Junta pb-1 ou alarga um pouco o entrelinhado.

Modo escuro

Um gradiente afinado para papel branco fica baço numa página escura. Dá-lhe tons próprios com variantes: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. A mesma ideia vale para fundos, como se vê em gradientes para modo escuro.

Animar o texto com gradiente no Tailwind

Um brilho lento vem de um fundo com o dobro da largura do texto que desliza para o lado. Na v4, define a animação dentro de @theme e passa a ser um utilitário animate-*.

@import "tailwindcss";

@theme {
  --animate-shine: shine 6s linear infinite;

  @keyframes shine {
    to { background-position: 200% center; }
  }
}

Usa-o no máximo uma vez por página. O movimento puxa o olhar, o que é o objetivo num título de lançamento e um incómodo em todo o resto. O padrão é o mesmo dos gradientes CSS animados.

Manter o texto com gradiente legível

1. 1

   Encontra a paragem mais fraca

   A cor mais clara numa página clara, ou a mais escura numa página escura, define o contraste que realmente obténs.

2. 2

   Testa-o como texto corrente

   Os títulos grandes e a negrito precisam de pelo menos 3:1 contra a página, segundo a WCAG. Contraste de cor e acessibilidade tem todas as regras.

3. 3

   Usa peso

   Os gradientes leem-se melhor em pesos negrito e pesados, onde há mais preenchimento para mostrar a cor.

4. 4

   Pára em poucas palavras

   Um título ou uma palavra em destaque. Qualquer coisa mais comprida começa a parecer um erro de renderização.

O texto com gradiente é uma técnica web. Quando o trabalho é um post social ou um banner e queres o gradiente por trás das palavras, os Marks do Gradiently movem a sua zona mais calma para trás do texto e escolhem tinta clara ou escura linha a linha, para as palavras se lerem sem testares cada paragem.