Card gradient
Added in 1.5.0
Card gradients give a card a colored gradient background, in single-color, multi-color, directional and animated variants.
Default markup
Use the .card-gradient class on a .card element to apply the default gradient treatment.
<div class="card card-gradient">...</div>The base gradient card:
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
Add a color class such as .card-gradient-primary or .card-gradient-success next to .card-gradient. Any name from the color palette works.
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
There are also multi-color themes with their own names:
- Rainbow
- Sun
- Snow
- Ocean
- Mellow
- Disco
- Psychedelic
- Love
- 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
The direction classes set where the gradient 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.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
card-gradient | component | Applied with card, fills the card with a gradient |
card-gradient-{preset} | style | Ready-made blends - disco, gold, love, mellow, ocean, psychedelic, rainbow, snow, sun |
card-gradient-animated | behavior | Slowly shifts the gradient |
card-gradient-bottom | direction | Starts the gradient at the bottom edge |
card-gradient-{color} | color | Any base color as the gradient start |
card-gradient-start | color | Sets the first color stop with a CSS custom property |
card-gradient-end | color | Sets the second color stop |
