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

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.

<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 quiseres saber o que o CSS gerado está a fazer, o guia de gradientes lineares 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, 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.

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.

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

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

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

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.

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

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

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

Há mais sobre a técnica de texto, incluindo contraste e alternativas, em texto com gradiente em CSS.