tabler/docs/pages/ui/utilities/gradients.mdx

---
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.
layout: '@shared/layouts/DocsMdxLayout.astro'
---

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

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

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

<Example>
  <div class="border rounded bg-gradient bg-gradient-from-primary bg-gradient-to-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-transparent 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-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>
</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 bg-gradient-to-transparent 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 bg-gradient-to-transparent">...</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} bg-gradient-to-transparent 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} bg-gradient-to-transparent`}>...</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 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>
</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>