Tailwind-gradientklasser: linjära, radiella och koniska i v4

En Tailwind-gradient byggs av två sorters klasser: en som anger gradienttyp och riktning, som bg-linear-to-r, och färgstoppklasser som fyller den, som from-indigo-500 to-pink-500. I Tailwind CSS v4 döptes riktningsklasserna om från bg-gradient-to-* till bg-linear-to-*, vinklar som bg-linear-45 blev möjliga utan egen CSS, och radiella och koniska gradienter kom som fullvärdiga klasser.

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

Allt här följer den officiella Tailwind-dokumentationen om bakgrundsbilder. Vill du veta vad den genererade CSS:en gör förklarar guiden linjära gradienter i CSS funktionen under ytan.

Linjära gradienter: riktningar och vinklar

bg-linear-to-t, -tr, -r, -br, -b, -bl, -l och -tl riktar gradienten mot en sida eller ett hörn. För varje annan riktning använder du en vinkel: bg-linear-45 eller bg-linear-160. Sätt ett minustecken framför för negativa vinklar, som i -bg-linear-45.

Under ytan sätter en riktningsklass en variabel som heter --tw-gradient-position och skriver background-image: linear-gradient(var(--tw-gradient-stops)), medan färgklasserna fyller --tw-gradient-stops. Delen in oklab läggs till i en @supports-kontroll, så webbläsare utan stöd för interpolation får ändå en fungerande sRGB-gradient. Den uppdelningen är också varför riktning och färger kan ändras var för sig, till exempel bara slutfärgen vid hover eller i mörkt läge med dark:to-violet-900.

Färgstopp: from, via och to

from-* anger startfärgen, to-* slutfärgen och via-* lägger till en färg i mitten. Varje färg i ditt tema fungerar, även med opacitetsmodifierare som from-indigo-500/60. Lägg en procentklass efter en färg för att flytta dess stopp: from-10%, via-30%, to-90%. Egna positioner fungerar också, som i 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>

Radiella och koniska gradienter i Tailwind v4

bg-radial ritar en radiell gradient från mitten, och samma färgstoppklasser fyller den. Flytta mitten med ett eget värde, där understreck står för mellanslag: bg-radial-[at_25%_25%]. bg-conic sveper färger runt mitten, och bg-conic-180 roterar startvinkeln.

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

Interpolationsmodifierare: oklab, oklch och nyansriktning

Tailwind v4 blandar gradienter i oklab som standard, vilket redan undviker de flesta grå mittpunkter. Lägg till en modifierare efter riktningen för att ändra det: /srgb matchar äldre designer, /oklch håller mättnaden hög mellan avlägsna nyanser, och /longer, /shorter, /increasing och /decreasing väljer nyansriktning. Resonemanget finns i OKLCH-interpolation i CSS-gradienter.

Egna gradienter och varumärkesfärger

För varumärkesfärger lägger du in dem i ditt tema, så blir de tillgängliga för alla färgklasser, även from-*, via-* och to-*. För en gradient som klasserna inte kan uttrycka, till exempel fyra eller fler stopp eller en ovanlig vinkel, använder du ett eget värde med understreck för mellanslag, eller låter en klass peka på en egen variabel.

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

Håller du varumärkesgradienten i en variabel skrivs den en gång och används överallt, och det är det som gör en gradient igenkännbar. Gradienter i varumärket förklarar varför den konsekvensen betyder mer än själva färgerna.

Gradienttext och hover-lägen i Tailwind

Gradienttext använder samma klasser plus bg-clip-text och text-transparent. Varianter fungerar på stoppklasser, så hover:from-pink-500 ändrar en färg vid hover. Gradienter övergår inte mjukt av sig själva, så för en mjuk hover tonar du ett överlags opacitet eller flyttar bg-position i stället för att byta stopp.

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

Mer om texttekniken, med kontrast och reservlösningar, finns i gradienttext i CSS.