# Gradientes no Tailwind: classes lineares, radiais e cónicas na v4

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

O Tailwind v4 mudou o nome das suas classes de gradiente, juntou ângulos, gradientes radiais e cónicos e passou a mistura por omissão para oklab. Aqui tens o sistema inteiro, com o CSS que cada classe produz.

## The short version

- No Tailwind CSS v4, os gradientes lineares usam bg-linear-to-* para direções e bg-linear-<angle> para ângulos, em substituição dos nomes bg-gradient-to-* da v3.
- As cores juntam-se com as classes from-*, via-* e to-*, e as suas posições com classes de percentagem como from-10% e to-90%.
- O Tailwind v4 junta as classes bg-radial e bg-conic, com valores arbitrários para posições, como bg-radial-[at_25%_25%].
- Os gradientes do Tailwind v4 misturam em oklab por omissão, e modificadores como /oklch, /srgb e /longer mudam a interpolação.
- Qualquer gradiente que o Tailwind não consiga exprimir com classes pode escrever-se como valor arbitrário, por exemplo bg-linear-[25deg,red_5%,yellow_60%].

Um **gradiente no Tailwind** constrói-se com dois tipos de classe: uma que define o tipo e a direção do gradiente, como `bg-linear-to-r`, e classes de paragens de cor que o preenchem, como `from-indigo-500 to-pink-500`. No Tailwind CSS v4, as classes de direção passaram de `bg-gradient-to-*` para `bg-linear-to-*`, ângulos como `bg-linear-45` tornaram-se possíveis sem CSS à medida, e os gradientes radiais e cónicos chegaram como classes de pleno direito.

```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, do índigo ao rosa. Sem CSS à medida.

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 desenha: `to right in oklab`, com o indigo-500 e o pink-500 por omissão do Tailwind.

Tudo aqui segue a [documentação oficial de background-image do Tailwind](https://tailwindcss.com/docs/background-image). Se quiseres saber o que o CSS gerado está a fazer, o guia de [gradientes lineares em CSS](https://gradiently.design/pt-pt/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, usa um ângulo: `bg-linear-45` ou `bg-linear-160`. Põe um sinal de menos à frente para ângulos negativos, como em `-bg-linear-45`.

| Classe | Direção gerada | O que 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 por omissão da v3 |
| `bg-(image:--brand-gradient)` | `var(--brand-gradient)` como imagem inteira | `bg-[image:var(--x)]` |

As classes de direção do Tailwind v4 e o CSS que produzem.

Por baixo, uma classe de direção define uma variável chamada `--tw-gradient-position` e escreve `background-image: linear-gradient(var(--tw-gradient-stops))`, enquanto as classes de cor preenchem `--tw-gradient-stops`. A parte `in oklab` é acrescentada dentro de uma verificação `@supports`, por isso os navegadores sem suporte de interpolação continuam a receber um gradiente sRGB que funciona. Essa separação é também a razão pela qual a direção e as cores podem mudar de forma independente, por exemplo só a cor final em hover ou em modo escuro com `dark:to-violet-900`.

> **Atualizar a partir da v3** As antigas classes `bg-gradient-to-r` continuam a compilar na v4, por isso um projeto atualizado não se parte. Muda-lhes o nome para `bg-linear-to-r` à medida que tocas em cada ficheiro, e conta com cores ligeiramente mais luminosas no meio, porque a mistura é agora em oklab.

## Paragens de cor: from, via e to

`from-*` define a cor inicial, `to-*` a cor final e `via-*` junta uma cor no meio. Todas as cores do teu tema funcionam, incluindo modificadores de opacidade como `from-indigo-500/60`. Junta uma classe de percentagem depois de uma cor para mover a sua paragem: `from-10%`, `via-30%`, `to-90%`. As 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 o sítio onde cada cor é plenamente ela própria.

- 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))`
- Com posições: 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, desenhadas.

## Gradientes radiais e cónicos no Tailwind v4

`bg-radial` desenha um gradiente radial a partir do centro, e as mesmas classes de paragens de cor preenchem-no. Move o centro com um valor arbitrário, em que os sublinhados fazem de espaços: `bg-radial-[at_25%_25%]`. `bg-conic` varre as cores em torno do centro, e `bg-conic-180` roda 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 numa 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))`

Representações aproximadas dos dois elementos acima. Para as funções de base, vê [gradientes radiais em CSS](https://gradiently.design/pt-pt/guide/css-radial-gradient) e [gradientes cónicos em CSS](https://gradiently.design/pt-pt/guide/css-conic-gradient).

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

O Tailwind v4 mistura os gradientes em oklab por omissão, o que já evita a maioria dos meios cinzentos. Junta um modificador depois da direção para o mudar: `/srgb` corresponde aos designs mais antigos, `/oklch` mantém a saturação alta entre tons distantes, e `/longer`, `/shorter`, `/increasing` e `/decreasing` escolhem a direção do tom. O raciocínio está em [interpolação OKLCH em gradientes CSS](https://gradiently.design/pt-pt/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 definições de interpolação. A última dá a volta longa ao círculo dos tons.

## Gradientes à medida e cores da marca

Para as cores da marca, junta-as ao teu tema e ficam disponíveis em todas as classes de cor, incluindo `from-*`, `via-*` e `to-*`. Para um gradiente que as classes não consigam exprimir, como quatro ou mais paragens ou um ângulo invulgar, usa um valor arbitrário com sublinhados no lugar dos espaços, ou aponta uma classe 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 de tema para as classes de paragens e um gradiente completo guardado numa 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 formas de ir além da paleta por omissão.

Guardar o gradiente da marca numa variável significa que é escrito uma vez e usado em todo o lado, e é isso que torna um gradiente reconhecível. [Branding com gradientes](https://gradiently.design/pt-pt/guide/gradient-branding) explica porque é que essa coerência importa mais do que as cores em si.

## Texto com gradiente e estados hover no Tailwind

O texto com gradiente usa as mesmas classes mais `bg-clip-text` e `text-transparent`. As variantes funcionam nas classes de paragens, por isso `hover:from-pink-500` muda uma cor em hover. Os gradientes em si não fazem transição, por isso, para um hover suave, esbate a opacidade de uma camada sobreposta ou move `bg-position` em vez de trocares paragens.

```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 com gradiente e um botão cujo gradiente desliza em hover.

### Evita

- Copiar `bg-gradient-to-r` da v3 para projetos novos em v4
- Listas longas de classes repetidas em todos os cartões
- `/srgb` em misturas entre tons distantes
- Trocar paragens em hover e esperar uma passagem suave

### Faz

- Usa `bg-linear-to-*` e `bg-linear-<angle>`
- Cores de tema ou uma propriedade personalizada para gradientes da marca
- Mantém o oklab por omissão, ou experimenta `/oklch` para misturas vivas
- Anima a posição ou a opacidade de uma camada sobreposta

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

## FAQ

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

Combina uma classe de direção com paragens de cor, por exemplo `bg-linear-to-r from-indigo-500 to-pink-500`. Junta `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 suporta 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 com gradiente no Tailwind?

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

### Porque é que os meus gradientes do Tailwind v4 ficam diferentes dos da v3?

A v4 mistura em oklab por omissão e a sua paleta por omissão está definida em oklch. Junta `/srgb` à classe de direção para teres a mistura antiga.