Texto com degradê no Tailwind: classes, sintaxe da v4 e correções

Para fazer texto com degradê no Tailwind, coloque um degradê no elemento e recorte-o nas letras: bg-linear-to-r from-violet-600 to-pink-500 bg-clip-text text-transparent. A primeira parte pinta um fundo em degradê, o bg-clip-text recorta esse fundo no formato dos glifos e o text-transparent remove a cor sólida do texto para o degradê aparecer. No Tailwind v3, escreva 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 juntas

Ajuda saber no que cada utilitário é compilado, porque todo bug do texto com degradê vem de uma das quatro partes que sumiu. Por baixo, é a mesma técnica do simples texto com degradê em CSS: background-clip: text com preenchimento transparente.

As direções seguem os sufixos de sempre: -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 para texto. Se você usou pouco os utilitários de degradê, degradês no Tailwind trata dos fundos em profundidade.

Nomes de classes no Tailwind v4 e v3

A maior mudança da v4 é o nome do utilitário linear. O bg-gradient-to-r virou bg-linear-to-r, para ficar ao lado dos novos utilitários radial e cônico. O nome antigo ainda compila na v4 por compatibilidade, mas código novo deve usar o novo.

Exemplos de texto com degradê para copiar

Três ou quatro cores próximas no círculo cromático dão o texto com degradê mais limpo. Opostas ficam berrantes e podem virar cinza no meio. Estas combinações usam cores da paleta padrão, descrita em cores do Tailwind.

As posições das paradas movem o lugar de cada cor. from-20% via-50% to-80% mantém cor sólida nas duas pontas de um título longo, o que parece mais calmo que uma mistura que começa já 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, continua vivo. Degradês CSS em OKLCH explica por quê.

Corrigindo problemas comuns do texto com degradê

Títulos de várias linhas

Por padrão, o degradê ocupa a caixa inteira do elemento, então um título que quebra recebe um único degradê esticado, com a segunda linha numa cor diferente da primeira. Acrescente box-decoration-clone para dar a cada linha o seu degradê completo, ou inline-block para encolher a caixa até o texto.

Hastes descendentes cortadas

Uma entrelinha apertada, como leading-none, pode cortar a parte de baixo de um g ou de um y, porque o fundo termina na caixa da linha. Acrescente pb-1 ou afrouxe um pouco a entrelinha.

Modo escuro

Um degradê ajustado para papel branco fica barrento numa página escura. Dê a ele tons próprios com variantes: from-violet-600 to-pink-600 dark:from-violet-300 dark:to-pink-300. O mesmo raciocínio vale para fundos, tratados em degradês para modo escuro.

Animando o texto com degradê no Tailwind

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

@import "tailwindcss";

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

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

Use no máximo uma vez por página. O movimento atrai o olhar, o que é o objetivo num título de lançamento e um incômodo em qualquer outro lugar. O padrão é o mesmo de degradês CSS animados.

Mantenha o texto com degradê legível

1. 1

   Ache a parada mais fraca

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

2. 2

   Teste como texto corrido

   Títulos grandes em negrito precisam de pelo menos 3:1 contra a página, pela WCAG. Contraste de cor e acessibilidade traz as regras completas.

3. 3

   Use peso

   Degradês se leem melhor em pesos negrito e pesado, onde há mais preenchimento para mostrar a cor.

4. 4

   Pare em poucas palavras

   Um título ou uma palavra de ênfase. Qualquer coisa mais longa começa a parecer um erro de renderização.

O texto com degradê é uma técnica de web. Quando o trabalho é um post de rede social ou um banner e você quer o degradê atrás das palavras, os Marks do Gradiently movem a área mais calma para trás do texto e escolhem tinta clara ou escura por linha, então as palavras se leem sem você testar cada parada.