---
title: Card gradient
summary: Card gradients give a card a colored gradient background, in single-color, multi-color, directional and animated variants.
description: Gradient card backgrounds, with color variants, multi-color themes, directions and animation.
added-in: '1.5.0'
related: [/ui/components/card]
source: core/scss/ui/_cards.scss
css-vars: card-gradient
classnames:
  component:
    - class: card-gradient
      desc: Applied with card, fills the card with a gradient
  style:
    - class: card-gradient-{preset}
      desc: Ready-made blends - disco, gold, love, mellow, ocean, psychedelic, rainbow, snow, sun
  behavior:
    - class: card-gradient-animated
      desc: Slowly shifts the gradient
  direction:
    - class: card-gradient-bottom
      desc: Starts the gradient at the bottom edge
  color:
    - class: card-gradient-{color}
      desc: Any base color as the gradient start
    - class: card-gradient-start
      desc: Sets the first color stop with a CSS custom property
    - class: card-gradient-end
      desc: Sets the second color stop
---

import Example from '@components/Example.astro'
export const gradients = ['rainbow', 'sun', 'snow', 'ocean', 'mellow', 'disco', 'psychedelic', 'love', 'gold']

## Default markup

Use the `.card-gradient` class on a `.card` element to apply the default gradient treatment.

```html
<div class="card card-gradient">...</div>
```

The base gradient card:

<Example column>
<div class="card card-gradient">
  <div class="card-body">
    <h3 class="card-title">Total Revenue</h3>
    <p class="text-secondary mb-0">Track key metrics in a highlighted card.</p>
  </div>
</div>
</Example>

## Color variants

Add a color class such as `.card-gradient-primary` or `.card-gradient-success` next to `.card-gradient`. Any name from the [color palette](/ui/base/colors) works.

<Example column>
<div class="card card-gradient card-gradient-primary">
  <div class="card-body">
    <h3 class="card-title">Primary</h3>
  </div>
</div>
<div class="card card-gradient card-gradient-success">
  <div class="card-body">
    <h3 class="card-title">Success</h3>
  </div>
</div>
<div class="card card-gradient card-gradient-danger">
  <div class="card-body">
    <h3 class="card-title">Danger</h3>
  </div>
</div>
<div class="card card-gradient card-gradient-blue">
  <div class="card-body">
    <h3 class="card-title">Blue</h3>
  </div>
</div>
</Example>

## Named gradients

There are also multi-color themes with their own names:
<ul>
{gradients.map((gradient, i) => { return ( <li class={`card-gradient-${gradient}`}>{gradient.charAt(0).toUpperCase() + gradient.slice(1)}</li> ) })}
</ul>
<Example column>

{gradients.map((gradient, i) => {
	return (
		<div class={`card card-gradient card-gradient-${gradient}`}>
			<div class="card-body">
				<h3 class="card-title">{gradient.charAt(0).toUpperCase() + gradient.slice(1)}</h3>
			</div>
		</div>
	)
})}

</Example>

## Direction modifiers

The direction classes set where the gradient starts.

```html
<div class="card card-gradient card-gradient-start">...</div>
<div class="card card-gradient card-gradient-end">...</div>
<div class="card card-gradient card-gradient-bottom">...</div>
```

<Example column>
<div class="card card-gradient card-gradient-start card-gradient-purple">
  <div class="card-body">
    <h3 class="card-title">Start</h3>
  </div>
</div>
<div class="card card-gradient card-gradient-end card-gradient-purple">
  <div class="card-body">
    <h3 class="card-title">End</h3>
  </div>
</div>
<div class="card card-gradient card-gradient-bottom card-gradient-purple">
  <div class="card-body">
    <h3 class="card-title">Bottom</h3>
  </div>
</div>
</Example>

## Animated gradient

Add `.card-gradient-animated` to animate gradient direction over time.

<Example column>
<div class="card card-gradient card-gradient-rainbow card-gradient-animated">
  <div class="card-body">
    <h3 class="card-title">Animated gradient</h3>
    <p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
  </div>
</div>
<div class="card card-gradient card-gradient-sun card-gradient-animated">
  <div class="card-body">
    <h3 class="card-title">Animated gradient</h3>
    <p class="text-secondary mb-0">Use this variant for visual emphasis on highlight cards.</p>
  </div>
</div>
</Example>

## Accessibility

- Keep text contrast readable on all gradient variants.
- Prefer short content blocks on high-saturation gradients.
- Avoid using animated gradients on too many cards in one view.