# Texto com gradiente no Tailwind: classes, v4 e soluções
[Canonical HTML page](https://gradiently.design/pt-pt/guide/tailwind-gradient-text)
Quatro utilitários transformam um título em texto com gradiente. Os detalhes à volta decidem se fica nítido ou cortado. Eis as classes para o Tailwind v4 e v3 e os problemas que vais encontrar.
## The short version
- O texto com gradiente no Tailwind precisa de um fundo em gradiente, de `bg-clip-text` para o recortar às letras e de `text-transparent` para o fundo aparecer.
- No Tailwind v4 o utilitário de gradiente é `bg-linear-to-r`, enquanto a v3 usa `bg-gradient-to-r`; as classes de cor from, via e to funcionam da mesma forma 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 de um gradiente.
- Junta `box-decoration-clone` quando um título com gradiente quebra em várias linhas, e um pouco de padding em baixo quando as hastes descendentes ficam cortadas.
- Verifica o contraste da cor mais clara do gradiente com a página, porque é aí que o texto com gradiente se torna difícil de ler.
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.
```html
Ship the quiet version
```
Todo o efeito numa só lista de classes. A ordem dentro do atributo class não importa.
## 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](https://gradiently.design/pt-pt/guide/css-gradient-text): `background-clip: text` com preenchimento transparente.
| Utilitário | O que define | Se te esqueceres dele |
| --- | --- | --- |
| `bg-linear-to-r` | Um gradiente linear para a direita | Nenhum gradiente |
| `from-*` `via-*` `to-*` | As paragens de cor | Paragens transparentes ou predefinidas |
| `bg-clip-text` | `background-clip: text` | Uma caixa colorida atrás de texto sólido |
| `text-transparent` | `color: transparent` | O texto sólido tapa o gradiente |
As quatro partes do texto com gradiente no Tailwind e o sintoma que cada uma deixa quando falta.
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](https://gradiently.design/pt-pt/guide/tailwind-gradient) 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.
| O que queres | 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 ao texto | `bg-clip-text` | `bg-clip-text` |
Lado a lado, para saberes para que versão foi escrito um excerto que encontraste online.
## 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](https://gradiently.design/pt-pt/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 legenda lista as paragens por ordem: a primeira vai em `from-*`, uma do meio em `via-*`, a última em `to-*`. Os tons 600 mantêm contraste suficiente numa página branca; numa página escura, passa para 300 ou 400. Os valores hex são da paleta v3; as versões OKLCH da v4 ficam muito próximas.
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.
```html
Plans for every team
Brighter in the middle
Exactly your colours
```
Posições das paragens, um modificador de interpolação e um gradiente totalmente personalizado. Os 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 mantém-se vivo. [Gradientes CSS em OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-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](https://gradiently.design/pt-pt/guide/dark-mode-gradients).
### Evitar
- Texto com gradiente em parágrafos compridos
- Uma paragem clara que desaparece no branco
- Cores complementares com o meio cinzento
- Texto com gradiente sobre um fundo em gradiente
- Não definir uma cor sólida para o texto selecionado
### Fazer
- Reservá-lo a um título ou a uma só palavra
- Verificar a paragem mais clara contra a página
- Matizes vizinhos, ou interpolação OKLCH
- Uma base sólida atrás das palavras com gradiente
- Definir `selection:text-white selection:bg-violet-600`
## 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-*`.
```css
@import "tailwindcss";
@theme {
--animate-shine: shine 6s linear infinite;
@keyframes shine {
to { background-position: 200% center; }
}
}
```
Depois junta `bg-size-[200%_auto] animate-shine motion-reduce:animate-none` ao título e repete a primeira cor como última paragem, para o ciclo não ter saltos.
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](https://gradiently.design/pt-pt/guide/css-animated-gradient).
## Manter o texto com gradiente legível
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. **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](https://gradiently.design/pt-pt/guide/color-contrast-accessibility) tem todas as regras.
3. **Usa peso** Os gradientes leem-se melhor em pesos negrito e pesados, onde há mais preenchimento para mostrar a cor.
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.
## FAQ
### Como faço texto com gradiente no Tailwind?
Junta um gradiente com `bg-linear-to-r` (ou `bg-gradient-to-r` na v3), paragens de cor com `from-*` e `to-*` e depois `bg-clip-text` e `text-transparent`.
### Porque é que o meu texto com gradiente no Tailwind não aparece?
Normalmente falta o `text-transparent`, e o texto sólido tapa o gradiente, ou falta o `bg-clip-text`, e o gradiente preenche uma caixa atrás das palavras. Confirma que as quatro partes estão no mesmo elemento.
### O que substituiu o bg-gradient-to-r no Tailwind v4?
O utilitário linear passou a `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 evito que o texto com gradiente corte letras como g e y?
Junta um pouco de padding em baixo, como `pb-1`, ou alarga a altura da linha, porque o fundo recortado termina na caixa da linha.
### O texto com gradiente é acessível?
Pode ser, se todas as partes do gradiente cumprirem os requisitos de contraste face à página. Testa a paragem mais clara e reserva o texto com gradiente para títulos.