Card gradient
Card gradients add rich color backgrounds to cards and help emphasize key information in dashboards and marketing sections.
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.
Total Revenue
Track key metrics in a highlighted card.
<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>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.
Primary
Success
Danger
Blue
<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>Named gradients
In addition to color-based variants, card gradients include predefined multi-color themes.
Here is a list of classes:
-
.card-gradient-rainbow -
.card-gradient-sun -
.card-gradient-snow -
.card-gradient-ocean -
.card-gradient-mellow -
.card-gradient-disco -
.card-gradient-psychedelic -
.card-gradient-love -
.card-gradient-gold
Rainbow
Sun
Snow
Ocean
Mellow
Disco
Psychedelic
Love
Gold
<div class="card card-gradient card-gradient-rainbow">
<div class="card-body">
<h3 class="card-title">Rainbow</h3>
</div>
</div>
<div class="card card-gradient card-gradient-sun">
<div class="card-body">
<h3 class="card-title">Sun</h3>
</div>
</div>
<div class="card card-gradient card-gradient-snow">
<div class="card-body">
<h3 class="card-title">Snow</h3>
</div>
</div>
<div class="card card-gradient card-gradient-ocean">
<div class="card-body">
<h3 class="card-title">Ocean</h3>
</div>
</div>
<div class="card card-gradient card-gradient-mellow">
<div class="card-body">
<h3 class="card-title">Mellow</h3>
</div>
</div>
<div class="card card-gradient card-gradient-disco">
<div class="card-body">
<h3 class="card-title">Disco</h3>
</div>
</div>
<div class="card card-gradient card-gradient-psychedelic">
<div class="card-body">
<h3 class="card-title">Psychedelic</h3>
</div>
</div>
<div class="card card-gradient card-gradient-love">
<div class="card-body">
<h3 class="card-title">Love</h3>
</div>
</div>
<div class="card card-gradient card-gradient-gold">
<div class="card-body">
<h3 class="card-title">Gold</h3>
</div>
</div>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>Start
End
Bottom
<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>Animated gradient
Add .card-gradient-animated to animate gradient direction over time.
Animated gradient
Use this variant for visual emphasis on highlight cards.
Animated gradient
Use this variant for visual emphasis on highlight cards.
<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>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.
Table of Contents
