tabler/docs/content/ui/components/card-gradient.md

title, summary, description

title	summary	description
Card gradient	Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.	Build eye-catching cards with gradient variants, directions, and animated backgrounds.

{% assign gradients = "rainbow,sun,snow,ocean,mellow,disco,psychedelic,love,gold" | split: "," %}

Default markup

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

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

The example below shows the base gradient card style.

{% capture html -%}

Total Revenue

Track key metrics in a highlighted card.

{%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" column %}

Color variants

You can change the color of card gradient by adding a color class like .card-gradient-primary or .card-gradient-success to the .card-gradient element. You can choose any color from full list of available colors.

{% capture html -%}

Primary

Success

Danger

Blue

{%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" column %}

Named gradients

In addition to color-based variants, card gradients include predefined multi-color themes.

Here is a list of classes: {% for gradient in gradients %}

• .card-gradient-{{ gradient }} {% endfor %}

{% capture html -%} {% for gradient in gradients %}

{{ gradient | capitalize }}

{% endfor %} {%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" column %}

Direction modifiers

Use direction modifiers to control where the gradient flow starts.

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

{% capture html -%}

Start

End

Bottom

{%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" column %}

Animated gradient

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

{% capture html -%}

Animated gradient

Use this variant for visual emphasis on highlight cards.

Animated gradient

Use this variant for visual emphasis on highlight cards.

{%- endcapture %} {% include "docs/example.html" html=html bg="surface-secondary" column %}

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.