# Texto com degradê no Tailwind: classes, sintaxe da v4 e correções
[Canonical HTML page](https://gradiently.design/pt-br/guide/tailwind-gradient-text)
Quatro utilitários transformam um título em texto com degradê. Os detalhes ao redor decidem se ele fica nítido ou cortado. Veja as classes do Tailwind v4 e v3 e os problemas que você vai encontrar.
## The short version
- O texto com degradê no Tailwind precisa de um fundo em degradê, de `bg-clip-text` para recortá-lo nas letras e de `text-transparent` para o fundo aparecer.
- No Tailwind v4 o utilitário de degradê é `bg-linear-to-r`, enquanto a v3 usa `bg-gradient-to-r`; as classes de cor from, via e to funcionam igual nas duas.
- O Tailwind v4 permite escolher o espaço de interpolação com um modificador como `bg-linear-to-r/oklch`, que mantém vivo o ponto médio do degradê.
- Acrescente `box-decoration-clone` quando um título em degradê quebrar em várias linhas e um pouco de preenchimento embaixo quando as hastes descendentes forem cortadas.
- Confira o contraste da cor mais clara do degradê contra a página, porque é ali que o texto em degradê fica difícil de ler.
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.
```html
Ship the quiet version
```
O efeito inteiro numa única lista de classes. A ordem dentro do atributo class não importa.
## 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](https://gradiently.design/pt-br/guide/css-gradient-text): `background-clip: text` com preenchimento transparente.
| Utilitário | O que define | Se você esquecer |
| --- | --- | --- |
| `bg-linear-to-r` | Um degradê linear para a direita | Nenhum degradê |
| `from-*` `via-*` `to-*` | As paradas de cor | Paradas transparentes ou padrão |
| `bg-clip-text` | `background-clip: text` | Uma caixa colorida atrás de texto sólido |
| `text-transparent` | `color: transparent` | O texto sólido cobre o degradê |
As quatro partes do texto com degradê no Tailwind e o sintoma que cada uma deixa quando falta.
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](https://gradiently.design/pt-br/guide/tailwind-gradient) 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.
| O que você quer | Tailwind v4 | Tailwind v3 |
| --- | --- | --- |
| Da esquerda para a direita | `bg-linear-to-r` | `bg-gradient-to-r` |
| Diagonal | `bg-linear-to-br` ou `bg-linear-45` | `bg-gradient-to-br` |
| Radial | `bg-radial` | Só com valor arbitrário |
| Cônico | `bg-conic` | Só com valor arbitrário |
| Mistura em OKLCH | `bg-linear-to-r/oklch` | Não disponível |
| Recortar no texto | `bg-clip-text` | `bg-clip-text` |
Lado a lado, para você saber para qual versão foi escrito um trecho de código que encontrou na internet.
## 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](https://gradiently.design/pt-br/guide/tailwind-colors).
- violet-600 / pink-600: `linear-gradient(90deg, #7c3aed 0%, #db2777 100%)`
- cyan-600 / blue-600 / violet-600: `linear-gradient(90deg, #0891b2 0%, #2563eb 50%, #7c3aed 100%)`
- orange-600 / rose-600: `linear-gradient(90deg, #ea580c 0%, #e11d48 100%)`
- emerald-600 / teal-600 / cyan-600: `linear-gradient(90deg, #059669 0%, #0d9488 50%, #0891b2 100%)`
- amber-500 / orange-500 / pink-600: `linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #db2777 100%)`
- slate-800 / slate-500: `linear-gradient(90deg, #1e293b 0%, #64748b 100%)`
Cada rótulo lista as paradas em ordem: a primeira vai em `from-*`, uma do meio em `via-*` e a última em `to-*`. Os tons 600 mantêm contraste suficiente numa página branca; numa página escura, troque por 300 ou 400. Os valores hex são da paleta da v3; as versões OKLCH da v4 ficam muito parecidas.
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.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Posições das paradas, um modificador de interpolação e um degradê totalmente personalizado. Valores arbitrários funcionam na v3 e na v4.
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](https://gradiently.design/pt-br/guide/css-gradient-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](https://gradiently.design/pt-br/guide/dark-mode-gradients).
### Evite
- Texto com degradê em parágrafos longos
- Uma parada clara que some no branco
- Cores complementares com meio cinzento
- Texto com degradê sobre fundo em degradê
- Deixar de definir uma cor sólida para o texto selecionado
### Faça
- Reserve para um título ou uma única palavra
- Confira a parada mais clara contra a página
- Matizes vizinhos, ou interpolação em OKLCH
- Fundo sólido atrás de palavras em degradê
- Defina `selection:text-white selection:bg-violet-600`
## 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-*`.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Depois acrescente `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` ao título e repita a primeira cor como última parada, para o ciclo não dar um salto.
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](https://gradiently.design/pt-br/guide/css-animated-gradient).
## Mantenha o texto com degradê legível
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. **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](https://gradiently.design/pt-br/guide/color-contrast-accessibility) traz as regras completas.
3. **Use peso** Degradês se leem melhor em pesos negrito e pesado, onde há mais preenchimento para mostrar a cor.
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.
## FAQ
### Como fazer texto com degradê no Tailwind?
Adicione um degradê com `bg-linear-to-r` (ou `bg-gradient-to-r` na v3), paradas de cor com `from-*` e `to-*` e depois `bg-clip-text` e `text-transparent`.
### Por que meu texto com degradê do Tailwind não aparece?
Em geral falta o `text-transparent`, e o texto sólido cobre o degradê, ou falta o `bg-clip-text`, e o degradê preenche uma caixa atrás das palavras. Confira se as quatro partes estão no mesmo elemento.
### O que substituiu o bg-gradient-to-r no Tailwind v4?
O utilitário linear agora é `bg-linear-to-r`. O nome antigo ainda funciona por compatibilidade, e a v4 acrescenta `bg-radial`, `bg-conic` e utilitários de ângulo, como `bg-linear-45`.
### Como evitar que o texto com degradê corte letras como g e y?
Acrescente um pouco de preenchimento embaixo, como `pb-1`, ou afrouxe a altura da linha, porque o fundo recortado termina na caixa da linha.
### Texto com degradê é acessível?
Pode ser, se todas as partes do degradê atenderem aos requisitos de contraste contra a página. Teste a parada mais clara e limite o texto com degradê a títulos.