Tailwind gradient classes: linear, radial and conic in v4

A Tailwind gradient is built from two kinds of utility: one that sets the gradient type and direction, such as bg-linear-to-r, and colour stop utilities that fill it, such as from-indigo-500 to-pink-500. In Tailwind CSS v4 the direction utilities were renamed from bg-gradient-to-* to bg-linear-to-*, angles like bg-linear-45 became possible without custom CSS, and radial and conic gradients arrived as first-class utilities.

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

Everything here follows the official Tailwind background-image documentation. If you want to know what the generated CSS is doing, the CSS linear gradient guide explains the function underneath.

Linear gradients: directions and angles

bg-linear-to-t, -tr, -r, -br, -b, -bl, -l and -tl point the gradient at a side or corner. For any other direction, use an angle: bg-linear-45 or bg-linear-160. Prefix a minus sign for negative angles, as in -bg-linear-45.

Under the hood, a direction utility sets a variable called --tw-gradient-position and writes background-image: linear-gradient(var(--tw-gradient-stops)), while the colour utilities fill --tw-gradient-stops. The in oklab part is added inside an @supports check, so browsers without interpolation support still get a working sRGB gradient. That split is also why direction and colours can change independently, for example only the end colour on hover or in dark mode with dark:to-violet-900.

Colour stops: from, via and to

from-* sets the start colour, to-* the end colour, and via-* adds one colour in the middle. Every colour in your theme works, including opacity modifiers such as from-indigo-500/60. Add a percentage utility after a colour to move its stop: from-10%, via-30%, to-90%. Arbitrary positions work too, as in 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>

Radial and conic gradients in Tailwind v4

bg-radial draws a radial gradient from the centre, and the same colour stop utilities fill it. Move the centre with an arbitrary value, where underscores stand in for spaces: bg-radial-[at_25%_25%]. bg-conic sweeps colours around the centre, and bg-conic-180 rotates the starting angle.

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

Interpolation modifiers: oklab, oklch and hue direction

Tailwind v4 blends gradients in oklab by default, which already avoids most grey midpoints. Add a modifier after the direction to change it: /srgb matches older designs, /oklch keeps saturation high between distant hues, and /longer, /shorter, /increasing and /decreasing choose the hue direction. The reasoning is in CSS gradient OKLCH interpolation.

Custom gradients and brand colours

For brand colours, add them to your theme and they become available to every colour utility, including from-*, via-* and to-*. For a gradient the utilities cannot express, such as four or more stops or an unusual angle, use an arbitrary value with underscores for spaces, or point a utility at a custom property.

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

Keeping the brand gradient in one variable means it is written once and used everywhere, which is what makes a gradient recognisable. Gradient branding explains why that consistency matters more than the colours themselves.

Gradient text and hover states in Tailwind

Gradient text uses the same classes plus bg-clip-text and text-transparent. Variants work on stop utilities, so hover:from-pink-500 changes a colour on hover. Gradients themselves do not transition, so for a smooth hover, fade an overlay's opacity or move bg-position instead of swapping stops.

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

More on the text technique, including contrast and fallbacks, is in gradient text in CSS.