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. A stop you do not set stays transparent, so a single from color already fades out.

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

<div class="border rounded bg-gradient bg-gradient-from-primary 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-t">...</div>
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-te">...</div>
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-e">...</div>
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-be">...</div>
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-b">...</div>
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-bs">...</div>
<div class="bg-gradient bg-gradient-from-blue bg-gradient-to-s">...</div>
<div class="bg-gradient bg-gradient-from-blue 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">...</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">...</div>
<div class="bg-gradient bg-gradient-from-azure">...</div>
<div class="bg-gradient bg-gradient-from-indigo">...</div>
<div class="bg-gradient bg-gradient-from-purple">...</div>
<div class="bg-gradient bg-gradient-from-pink">...</div>
<div class="bg-gradient bg-gradient-from-red">...</div>
<div class="bg-gradient bg-gradient-from-orange">...</div>
<div class="bg-gradient bg-gradient-from-yellow">...</div>
<div class="bg-gradient bg-gradient-from-lime">...</div>
<div class="bg-gradient bg-gradient-from-green">...</div>
<div class="bg-gradient bg-gradient-from-teal">...</div>
<div class="bg-gradient bg-gradient-from-cyan">...</div>
<div class="bg-gradient bg-gradient-from-white">...</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 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>

Accessibility

• Text on a gradient has to pass contrast at every point of it, not only in the middle. Check the lightest end.
• A gradient is decoration. Do not use one as the only mark of a state or a category.
• When a gradient sits behind text, add an overlay instead of hoping the photo is dark enough - that is what card-img-overlay-dark does.
• Animated gradients keep moving. Stop them under prefers-reduced-motion.

Related