Gradients

Compose gradients with direction and color stops, including radial, conic, and gradient-filled text.

5 min read Level 2/5 #tailwind#color

What you'll learn

Build linear gradients with from, via, and to
Use radial and conic gradients added in v4
Make gradient text with bg-clip-text

Gradients are built from a direction utility plus color-stop utilities. v4 expands this well beyond simple linear fades.

Linear Gradients

Pick a direction, then declare stops with from-, optional via-, and to-:

<div class="bg-linear-to-r from-indigo-500 via-purple-500 to-pink-500 h-24">
</div>

In v4 the linear utility is bg-linear-to-* (the v3 name was bg-gradient-to-*).

Radial and Conic

v4 adds first-class radial and conic gradients, plus interpolation control:

<div class="bg-radial from-amber-200 to-amber-600 size-40 rounded-full"></div>
<div class="bg-conic from-red-500 via-lime-500 to-red-500 size-40 rounded-full"></div>
<div class="bg-linear-to-r/oklch from-blue-500 to-pink-500 h-12"></div>

The /oklch suffix interpolates the gradient in OKLCH space, which avoids the muddy gray midpoint sRGB gradients often have.

Gradient Text

Clip the gradient to the text glyphs and make the fill transparent so the gradient shows through:

<h1 class="bg-linear-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent text-5xl font-bold">
  Gradient headline
</h1>

Lists & Generated Content →