Tailwind Gradients
Tailwind gradient classes
Tailwind CSS builds a gradient from two kinds of classes on the same element: one sets the type and direction of the gradient, the others set its colors, with from- for the first color, via- for an optional middle color and to- for the last one. Any Tailwind color works, and so do your own hex colors in square brackets.
The examples below use Tailwind v4, the current version, with the Tailwind v3 equivalents further down.
Linear gradients
The direction is bg-linear-to-t, -to-tr, -to-r, -to-br, -to-b, -to-bl, -to-l or -to-tl, or an exact angle such as bg-linear-45 or bg-linear-135.
Radial gradients
bg-radial starts from the center; bg-radial-[at_25%_25%] moves it (use underscores where CSS would have spaces).
Conic gradients
Color stop positions
<div class="bg-linear-to-r from-[#2E3192] from-10% via-[#1BFFFF] via-30% to-[#11C37C] to-90%"></div>
Add a percentage after each color class to set where that color sits.
More than 3 colors
The color classes allow one middle color at most. For more colors, write the whole gradient in a single class, with underscores instead of spaces:
Mesh gradients
Tailwind has no mesh gradient class, but a mesh gradient is only radial gradients stacked on a background color, so it fits in two arbitrary classes: one for the stacked gradients, one for the color underneath. It has to be two, because a single class ending in a color is read by Tailwind as a plain background color.
<div class="bg-[image:radial-gradient(at_20%_30%,#FF6B6B,transparent_70%),radial-gradient(at_80%_70%,#4D96FF,transparent_70%)] bg-[#FFD93D]"></div>
In the gradient generator, choose Mesh, place the colors, then copy them as Tailwind v4 or v3.
Color blending
Tailwind v4 blends gradient colors in the oklab color space by default, which keeps the middle of a gradient from turning grey. A modifier changes it: bg-linear-to-r/srgb blends like plain CSS does, and /oklch takes the way around the color wheel, for more vivid middles. Classes from the gradient generator use /srgb, so they look exactly like its preview. OKLCH gradients explains the difference between the three.
Tailwind v3
In Tailwind v3 the direction class is bg-gradient-to-r (and -to-br, -to-b, and so on), with the same from-, via- and to- classes. v3 has no angle, radial or conic classes: use a single arbitrary class for those.
<div class="bg-gradient-to-r from-[#7F7FD5] via-[#86A8E7] to-[#91EAE4]"></div> <div class="bg-[radial-gradient(at_25%_25%,#FFD93D,#FF6B6B)]"></div>
FAQ
How do I add a gradient in Tailwind CSS?
Put a direction class and two or three color stop classes on the element: in Tailwind v4, for example bg-linear-to-r from-cyan-500 to-blue-500. In Tailwind v3 the direction class is bg-gradient-to-r instead.
How do I use more than 3 colors in a Tailwind gradient?
The from, via and to classes allow one middle color at most. For more colors, write the whole gradient in one arbitrary class, with underscores instead of spaces: bg-linear-[135deg,#FF6B6B_0%,#FFD93D_33%,#6BCB77_66%,#4D96FF_100%] in v4, or bg-[linear-gradient(...)] in v3.
How do I make a radial gradient in Tailwind?
In Tailwind v4, use bg-radial with color stops, and bg-radial-[at_25%_25%] to move the center. Tailwind v3 has no radial gradient class, so use an arbitrary value: bg-[radial-gradient(at_25%_25%,#FF6B6B,#4D96FF)].
What changed between Tailwind v3 and v4 gradients?
v4 renamed bg-gradient-to-r to bg-linear-to-r (the old name still works), added angles such as bg-linear-45, added radial and conic gradients (bg-radial, bg-conic), and blends colors in the oklab color space by default, which you can change with modifiers such as /srgb or /oklch.
Can I use my own hex colors in a Tailwind gradient?
Yes, with square brackets: from-[#7F7FD5] via-[#86A8E7] to-[#91EAE4]. The gradient generator writes these classes for you: choose Tailwind v4 or Tailwind v3 in the Copy CSS menu.