Tailwind Gradients

Tailwind's gradient utilities let you build linear and radial gradients directly in your class list, no custom CSS required. This lesson covers gradient direction, color stops, and multi-color gradients.

What Are Tailwind Gradient Utilities?

Gradients are built from two or three utilities working together: a direction class like bg-gradient-to-r, a starting color (from-*), and an ending color (to-*), with an optional middle color (via-*) for a three-color gradient.

Because gradient utilities reuse the same color palette as everything else in Tailwind, you can build on-brand gradients without ever writing raw linear-gradient() CSS.

<div class="h-24 rounded-lg bg-gradient-to-r from-blue-500 to-purple-600">
  Two-color horizontal gradient.
</div>

bg-gradient-to-r sets the direction, while from-* and to-* define the color stops.

Gradient Utility Syntax

class="bg-gradient-to-{direction}"
class="from-{color}-{shade}"
class="via-{color}-{shade}"
class="to-{color}-{shade}"

bg-gradient-to-r (or -l, -t, -b, -tr, -tl, -br, -bl) sets the gradient direction.
from-* sets the starting color stop.
via-* optionally adds a middle color stop for a three-color gradient.
to-* sets the ending color stop; without it, the gradient fades to transparent.

Gradient Utilities Cheatsheet

Direction classes and color stop patterns for building gradients.

Utility	Effect
`bg-gradient-to-r`	Gradient flows left to right
`bg-gradient-to-l`	Gradient flows right to left
`bg-gradient-to-t`	Gradient flows bottom to top
`bg-gradient-to-b`	Gradient flows top to bottom
`bg-gradient-to-br`	Gradient flows diagonally to bottom-right
`from-blue-500`	Starting color stop
`via-purple-500`	Middle color stop for a three-color gradient
`to-pink-500`	Ending color stop
`bg-[radial-gradient(...)]`	Arbitrary value for a radial gradient

Building a Two-Color Gradient

The simplest gradient combines a direction utility with from-* and to-*. This is the most common pattern for hero section backgrounds, buttons, and decorative accents.

<div class="rounded-xl bg-gradient-to-r from-indigo-500 to-sky-500 p-8 text-white">
  <h2 class="text-2xl font-bold">Gradient Hero Section</h2>
</div>

Building a Three-Color Gradient With via

Adding a via-* color stop creates a smoother, more dynamic transition through a middle color, common for vibrant marketing sections and app icons.

<div class="h-32 rounded-lg bg-gradient-to-tr from-amber-400 via-rose-500 to-purple-600">
  Three-color diagonal gradient.
</div>

Gradient Text Effect

Combining gradient background utilities with bg-clip-text and text-transparent clips the gradient to the shape of the text itself, a popular effect for headlines and logos.

<h1 class="bg-gradient-to-r from-pink-500 to-violet-600 bg-clip-text text-4xl font-bold text-transparent">
  Gradient Text Heading
</h1>

text-transparent hides the text's own color so the clipped gradient background shows through instead.

Common Mistakes

Forgetting to-* and being surprised the gradient fades to transparent instead of a second solid color.
Choosing gradient colors with poor contrast against overlaid text, hurting readability.
Not adding bg-clip-text text-transparent when attempting a gradient text effect, resulting in a solid background box behind the text instead.
Overusing multiple different gradients across one page, creating visual inconsistency.
Using gradients on small UI elements like form inputs, which usually look better with a flat color.

Key Takeaways

Tailwind gradients combine a direction utility (bg-gradient-to-r) with from-*, via-*, and to-* color stops.
Omitting to-* fades the gradient into transparency instead of a solid second color.
Three-color gradients use an additional via-* middle color stop.
Gradient text effects require bg-clip-text combined with text-transparent.
Reserve gradients for hero sections, buttons, and accents rather than every UI surface.

Pro Tip

When testing a new gradient combination, temporarily overlay your real heading text on top and confirm it stays readable across the entire gradient, not just at the lightest or darkest end.