Gradient

Two-color gradients

Combine any two theme color keys to produce a linear gradient background.

<div class="gradient-primary-success text-white p-4">
  primary to success
</div>

<div class="gradient-indigo-pink text-white p-4">
  indigo to pink
</div>

Three-color gradients

Chain a third color for a smoother multi-stop transition: .gradient-{from}-{via}-{to}.

<div class="gradient-primary-purple-danger text-white p-4">
  Three-stop gradient
</div>

Every distinct pairing is generated. Since gradients loop over the full $theme-colors map against itself (and again for the three-stop variant), every unique combination produces a class. Pairs that repeat the same color - such as .gradient-primary-primary - are skipped, and extending $theme-colors automatically extends the gradient set.

Direction

Point the gradient toward any side or corner with .gradient-to-{side}-{from}-{to}. Available sides: top, bottom, left, right, top-left, top-right, bottom-left, bottom-right.

<div class="gradient-to-right-primary-success text-white p-4">
  Horizontal gradient
</div>

<div class="gradient-to-top-right-indigo-pink text-white p-4">
  Diagonal gradient
</div>

Radial

Create a circular gradient radiating from the center with .gradient-radial-{from}-{to}.

<div class="gradient-radial-primary-success text-white p-4">
  Circular gradient
</div>

Reference