---
title: Gradients
summary: Use gradient utilities to build directional color backgrounds with from, via, and to color stops.
description: Create directional gradients with utility classes.
related: [/ui/utilities/background-patterns, /ui/base/colors]
---

import Example from '@components/Example.astro'
import site from '@data/site.json'
export const colors = [...Object.keys(site.colors), 'white']

## 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.

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

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

## 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`

<Example hideCode>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3">
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-t p-4"></div>
    <code>.bg-gradient-to-t</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-te p-4"></div>
    <code>.bg-gradient-to-te</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-e p-4"></div>
    <code>.bg-gradient-to-e</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-be p-4"></div>
    <code>.bg-gradient-to-be</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-b p-4"></div>
    <code>.bg-gradient-to-b</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-bs p-4"></div>
    <code>.bg-gradient-to-bs</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-s p-4"></div>
    <code>.bg-gradient-to-s</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-blue bg-gradient-to-ts p-4"></div>
    <code>.bg-gradient-to-ts</code>
  </div>
</div>
</Example>

<Example codeOnly>
<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>
</Example>

## 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](/ui/base/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}`

<Example hideCode>
<div class="row row-cols-1 row-cols-lg-2 g-3">
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-purple p-5"></div>
    <code>.bg-gradient-from-purple .bg-gradient-to-transparent</code>
  </div>
  <div class="col">
    <div class="border rounded bg-gradient bg-gradient-from-pink bg-gradient-via-orange bg-gradient-to-yellow p-5"></div>
    <code>.bg-gradient-from-pink .bg-gradient-via-orange .bg-gradient-to-yellow</code>
  </div>
</div>
</Example>

<Example codeOnly>
<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>
</Example>

## Available colors

You can use any project color token with `from`, `via`, and `to` utilities. See the [full list of available colors](/ui/base/colors) for all color names.

<Example hideCode>

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-6 g-3">
  {colors.map((color) => (
  <div class="col">
    <div class={`border rounded bg-gradient bg-gradient-from-${color} mb-2 p-4`}></div>
    <code>.bg-gradient-from-{ color }</code>
  </div>
  ))}
</div>
</Example>
<Example codeOnly>
  {colors.map((color) => (
  <div class={`bg-gradient bg-gradient-from-${color}`}>...</div>
  ))}
</Example>

## Examples

### Card header gradient

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

<Example>
<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>
</Example>

### Badge-like highlight

Use short gradients on compact UI elements for subtle emphasis.

<Example>
<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>
</Example>

## 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`.