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

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.

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

Tudo aqui segue a documentação oficial de background-image do Tailwind. Se você quer saber o que o CSS gerado está fazendo, o guia de gradiente linear em CSS 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.

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.

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%].

<!-- 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>

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.

<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>

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.

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.

@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));
}

<!-- 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>

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 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.

<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>

Mais sobre a técnica de texto, incluindo contraste e fallbacks, em texto com gradiente em CSS.