# Gradiente no Tailwind: classes linear, radial e cônica na v4

[Canonical HTML page](https://gradiently.design/pt-br/guide/tailwind-gradient)

O Tailwind v4 renomeou seus utilitários de gradiente, adicionou ângulos e gradientes radiais e cônicos e mudou a mistura padrão para oklab. Aqui está o sistema inteiro, com o CSS que cada classe gera.

## The short version

- No Tailwind CSS v4, os gradientes lineares usam bg-linear-to-* para direções e bg-linear-<angle> para ângulos, substituindo os nomes bg-gradient-to-* da v3.
- As cores são adicionadas com os utilitários from-*, via-* e to-*, e suas posições, com utilitários de porcentagem como from-10% e to-90%.
- O Tailwind v4 adiciona os utilitários bg-radial e bg-conic, com valores arbitrários para posições como bg-radial-[at_25%_25%].
- Os gradientes do Tailwind v4 são misturados em oklab por padrão, e modificadores como /oklch, /srgb e /longer mudam a interpolação.
- Qualquer gradiente que o Tailwind não consegue expressar com utilitários pode ser escrito como um valor arbitrário, como bg-linear-[25deg,red_5%,yellow_60%].

Um **gradiente no Tailwind** é feito de dois tipos de utilitário: um que define o tipo e a direção do gradiente, como `bg-linear-to-r`, e utilitários de parada de cor que o preenchem, como `from-indigo-500 to-pink-500`. No Tailwind CSS v4, os utilitários de direção foram renomeados de `bg-gradient-to-*` para `bg-linear-to-*`, ângulos como `bg-linear-45` passaram a ser possíveis sem CSS próprio, e os gradientes radiais e cônicos chegaram como utilitários nativos.

```html
<div class="h-32 rounded-2xl bg-linear-to-r from-indigo-500 to-pink-500"></div>
```

Um gradiente da esquerda para a direita, de índigo a rosa. Sem CSS próprio.

from-indigo-500 to-pink-500: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(65.6% 0.241 354.308))`

O que essa lista de classes renderiza: `to right in oklab`, com o indigo-500 e o pink-500 padrão do Tailwind.

Tudo aqui segue a [documentação oficial de background-image do Tailwind](https://tailwindcss.com/docs/background-image). Se você quer saber o que o CSS gerado está fazendo, o guia de [gradiente linear em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient) explica a função que está por baixo.

## Gradientes lineares: direções e ângulos

`bg-linear-to-t`, `-tr`, `-r`, `-br`, `-b`, `-bl`, `-l` e `-tl` apontam o gradiente para um lado ou um canto. Para qualquer outra direção, use um ângulo: `bg-linear-45` ou `bg-linear-160`. Coloque um sinal de menos na frente para ângulos negativos, como em `-bg-linear-45`.

| Classe | Direção gerada | Substitui na v3 |
| --- | --- | --- |
| `bg-linear-to-r` | `to right in oklab` | `bg-gradient-to-r` |
| `bg-linear-to-br` | `to bottom right in oklab` | `bg-gradient-to-br` |
| `bg-linear-45` | `45deg in oklab` | um valor arbitrário |
| `bg-linear-to-b/srgb` | `to bottom in srgb` | a mistura padrão da v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` como a imagem inteira | `bg-[image:var(--x)]` |

Utilitários de direção no Tailwind v4 e o CSS que eles geram.

Por baixo dos panos, um utilitário de direção define uma variável chamada `--tw-gradient-position` e escreve `background-image: linear-gradient(var(--tw-gradient-stops))`, enquanto os utilitários de cor preenchem `--tw-gradient-stops`. A parte `in oklab` é adicionada dentro de uma verificação `@supports`, então navegadores sem suporte a interpolação ainda recebem um gradiente sRGB que funciona. Essa separação também é o motivo de direção e cores poderem mudar de forma independente, por exemplo só a cor final no hover ou no modo escuro com `dark:to-violet-900`.

> **Migrando da v3** As classes antigas `bg-gradient-to-r` ainda compilam na v4, então um projeto atualizado não vai quebrar. Renomeie para `bg-linear-to-r` conforme mexer em cada arquivo e espere cores um pouco mais vivas no meio, porque a mistura agora é em oklab.

## Paradas de cor: from, via e to

`from-*` define a cor inicial, `to-*` a cor final, e `via-*` adiciona uma cor no meio. Todas as cores do seu tema funcionam, inclusive com modificadores de opacidade como `from-indigo-500/60`. Adicione um utilitário de porcentagem depois de uma cor para mover a parada: `from-10%`, `via-30%`, `to-90%`. Posições arbitrárias também funcionam, como em `from-[21.5%]`.

```html
<!-- three stops, evenly spaced -->
<div class="bg-linear-to-r from-indigo-500 via-sky-500 to-emerald-500"></div>

<!-- the same stops, pulled towards the edges -->
<div class="bg-linear-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90%"></div>
```

As posições mudam onde cada cor aparece por inteiro.

- Uniforme: índigo, céu, esmeralda: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(68.5% 0.169 237.323), oklch(69.6% 0.17 162.48))`
- Posicionado: 10%, 30%, 90%: `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117) 10%, oklch(68.5% 0.169 237.323) 30%, oklch(69.6% 0.17 162.48) 90%)`

As duas listas de classes acima, renderizadas.

## Gradientes radiais e cônicos no Tailwind v4

`bg-radial` desenha um gradiente radial a partir do centro, e os mesmos utilitários de parada de cor o preenchem. Mova o centro com um valor arbitrário, em que os sublinhados fazem o papel dos espaços: `bg-radial-[at_25%_25%]`. `bg-conic` distribui as cores em volta do centro, e `bg-conic-180` gira o ângulo inicial.

```html
<div class="size-24 rounded-full bg-radial-[at_25%_25%] from-white to-zinc-900 to-75%"></div>

<div class="size-24 rounded-full bg-conic-180 from-indigo-600 via-indigo-50 to-indigo-600"></div>
```

Uma esfera iluminada e um disco metálico, cada um em uma linha.

- bg-radial-[at_25%_25%]: `radial-gradient(at 25% 25% in oklab, #ffffff, oklch(21% 0.006 285.885) 75%)`
- bg-conic-180: `conic-gradient(from 180deg in oklab, oklch(51.1% 0.262 276.966), oklch(96.2% 0.018 272.314), oklch(51.1% 0.262 276.966))`

Renderizações aproximadas dos dois elementos acima. Para as funções por baixo, veja [gradientes radiais em CSS](https://gradiently.design/pt-br/guide/css-radial-gradient) e [gradientes cônicos em CSS](https://gradiently.design/pt-br/guide/css-conic-gradient).

## Modificadores de interpolação: oklab, oklch e direção do matiz

O Tailwind v4 mistura os gradientes em oklab por padrão, o que já evita a maioria dos meios acinzentados. Adicione um modificador depois da direção para mudar isso: `/srgb` reproduz designs mais antigos, `/oklch` mantém a saturação alta entre matizes distantes, e `/longer`, `/shorter`, `/increasing` e `/decreasing` escolhem a direção do matiz. A explicação está em [interpolação OKLCH em gradientes CSS](https://gradiently.design/pt-br/guide/css-gradient-oklch).

- bg-linear-to-r/srgb: `linear-gradient(to right in srgb, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r (oklab): `linear-gradient(to right in oklab, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r/oklch: `linear-gradient(to right in oklch, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`
- bg-linear-to-r/longer: `linear-gradient(to right in oklch longer hue, oklch(58.5% 0.233 277.117), oklch(77.7% 0.152 181.912))`

`from-indigo-500 to-teal-400` com quatro configurações de interpolação. A última dá a volta mais longa pelo círculo de matizes.

## Gradientes próprios e cores da marca

Para as cores da marca, adicione-as ao seu tema e elas ficam disponíveis em todos os utilitários de cor, incluindo `from-*`, `via-*` e `to-*`. Para um gradiente que os utilitários não conseguem expressar, como quatro ou mais paradas ou um ângulo incomum, use um valor arbitrário com sublinhados no lugar dos espaços, ou aponte um utilitário para uma propriedade personalizada.

```css
@import "tailwindcss";

@theme {
  --color-dusk: oklch(28% 0.09 285);
  --color-ember: oklch(70% 0.19 40);
}

:root {
  --brand-gradient: linear-gradient(135deg in oklch, var(--color-dusk), var(--color-ember));
}
```

Cores do tema para os utilitários de parada e um gradiente completo guardado em uma propriedade personalizada.

```html
<!-- brand colours through the stop utilities -->
<div class="bg-linear-135 from-dusk to-ember"></div>

<!-- the whole gradient from a custom property -->
<div class="bg-(image:--brand-gradient)"></div>

<!-- a one-off arbitrary gradient -->
<div class="bg-linear-[25deg,red_5%,yellow_60%,lime_90%,teal]"></div>
```

Três maneiras de ir além da paleta padrão.

Manter o gradiente da marca em uma única variável significa que ele é escrito uma vez e usado em todo lugar, e é isso que torna um gradiente reconhecível. [Branding com gradientes](https://gradiently.design/pt-br/guide/gradient-branding) explica por que essa consistência importa mais do que as cores em si.

## Texto gradiente e estados de hover no Tailwind

O texto gradiente usa as mesmas classes mais `bg-clip-text` e `text-transparent`. As variantes funcionam nos utilitários de parada, então `hover:from-pink-500` muda uma cor no hover. Os gradientes em si não fazem transição, então, para um hover suave, esmaeça a opacidade de uma sobreposição ou mova `bg-position` em vez de trocar as paradas.

```html
<h1 class="bg-linear-to-r from-violet-600 to-rose-600 bg-clip-text text-5xl font-bold text-transparent">
  Launch day
</h1>

<a class="bg-linear-to-r from-violet-600 to-rose-600 bg-size-[200%_100%] bg-left px-5 py-3 text-white transition-[background-position] duration-500 hover:bg-right">
  Get started
</a>
```

Texto gradiente e um botão cujo gradiente desliza no hover.

### Evite

- Copiar `bg-gradient-to-r` da v3 para projetos novos em v4
- Listas longas de classes repetidas em cada card
- `/srgb` em misturas entre matizes distantes
- Trocar paradas no hover e esperar um fade suave

### Faça

- Use `bg-linear-to-*` e `bg-linear-<angle>`
- Cores do tema ou uma propriedade personalizada para gradientes da marca
- Mantenha o oklab padrão ou experimente `/oklch` para misturas vivas
- Anime a posição ou a opacidade de uma sobreposição

Mais sobre a técnica de texto, incluindo contraste e fallbacks, em [texto com gradiente em CSS](https://gradiently.design/pt-br/guide/css-gradient-text).

## FAQ

### Como faço um gradiente no Tailwind CSS?

Combine um utilitário de direção com paradas de cor, por exemplo `bg-linear-to-r from-indigo-500 to-pink-500`. Adicione `via-*` para uma cor no meio.

### O que substituiu bg-gradient-to-r no Tailwind v4?

`bg-linear-to-r`. Os nomes da v4 são `bg-linear-to-*` para direções e `bg-linear-<angle>` para ângulos, como `bg-linear-45`.

### O Tailwind tem gradientes radiais e cônicos?

Sim, a partir da v4: `bg-radial` e `bg-conic`, com posições arbitrárias como `bg-radial-[at_25%_25%]` e ângulos como `bg-conic-180`.

### Como faço texto gradiente no Tailwind?

Adicione `bg-clip-text` e `text-transparent` a um elemento com classes de gradiente, como `bg-linear-to-r from-violet-600 to-rose-600`.

### Por que meus gradientes no Tailwind v4 estão diferentes da v3?

A v4 mistura em oklab por padrão, e sua paleta padrão é definida em oklch. Adicione `/srgb` ao utilitário de direção para ter a mistura antiga.