# Card gradient > Card gradients give a card a colored gradient background, in single-color, multi-color, directional and animated variants. Gradient card backgrounds, with color variants, multi-color themes, directions and animation. Source: https://docs.tabler.io/ui/components/card-gradient --- 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

``` The base gradient card: ```html

Total Revenue

Track key metrics in a highlighted card.

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

Primary

Success

Danger

Blue

``` ## Named gradients There are also multi-color themes with their own names:

{gradient.charAt(0).toUpperCase() + gradient.slice(1)}

```html

Rainbow

Sun

Snow

Ocean

Mellow

Disco

Psychedelic

Love

Gold

``` ## Direction modifiers The direction classes set where the gradient starts. ```html

...

``` ```html

Start

End

Bottom

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

Animated gradient

Use this variant for visual emphasis on highlight cards.

Animated gradient

Use this variant for visual emphasis on highlight cards.

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