Gradients

Use gradient utilities to build directional color backgrounds with from, via, and to color stops.

Default gradient

Use .bg-gradient to enable gradient background rendering on an element. Then combine it with color stop utilities to define the final look.

<div class="bg-gradient bg-gradient-from-primary bg-gradient-to-transparent">
</div>

<div
  class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent p-5">
</div>

Gradient directions

Use direction utilities to control gradient flow:

• .bg-gradient-to-t
• .bg-gradient-to-te
• .bg-gradient-to-e
• .bg-gradient-to-be
• .bg-gradient-to-b
• .bg-gradient-to-bs
• .bg-gradient-to-s
• .bg-gradient-to-ts

<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-t">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-te">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-e">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-be">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-b">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-bs">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-s">
  ...
</div>
<div
  class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent bg-gradient-to-ts">
  ...
</div>

Gradient color stops

Use color stop utilities to control where a gradient starts, transitions, and ends. You can choose any color from full list of available colors.

Here is a list of classes:

• .bg-gradient-from-{color}
• .bg-gradient-via-{color} (optional middle stop for smoother blending)
• .bg-gradient-to-{color}

<div class="bg-gradient bg-gradient-from-purple bg-gradient-to-transparent">
  ...
</div>

<div
  class="bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow">
  ...
</div>

Available colors

You can use any project color token with from, via, and to utilities. See the full list of available colors for all color names.

<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-azure bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-indigo bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-purple bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-pink bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-red bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-orange bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-yellow bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-lime bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-green bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-teal bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-cyan bg-gradient-to-transparent">
  ...
</div>

<div class="bg-gradient bg-gradient-from-white bg-gradient-to-transparent">
  ...
</div>

<div
  class="bg-gradient bg-gradient-from-transparent bg-gradient-to-transparent">
  ...
</div>

Examples

Card header gradient

Use gradient utilities on card sections to highlight key content areas.

<div class="card">
  <div
    class="card-body bg-gradient bg-gradient-from-indigo bg-gradient-to-transparent rounded-top">
    <h3 class="card-title mb-1">Performance</h3>
    <p class="text-secondary mb-0">Weekly trend overview</p>
  </div>

  <div class="card-body">
    <p class="mb-0">Card content</p>
  </div>
</div>

Badge-like highlight

Use short gradients on compact UI elements for subtle emphasis.

<div class="d-flex gap-2 flex-wrap">
  <span
    class="badge bg-gradient bg-gradient-from-green bg-gradient-to-teal">Success
    trend</span>
  <span
    class="badge bg-gradient bg-gradient-from-orange bg-gradient-to-red">Warning
    trend</span>
  <span
    class="badge bg-gradient bg-gradient-from-blue bg-gradient-to-purple">New
    feature</span>
</div>