Modern CSS Gradient Effects
Animated, mesh, conic and text gradients built from the theme colours.
1Aurora Hover
Northern-lights colour clouds that drift inside a card and brighten when it is hovered. Class: fx-aurora-hover
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="card fx-aurora-hover" style="width:15rem">
<div class="card-body">
<h3 class="h6 fw-bold mb-1">Secure giving</h3>
<p class="small text-body-secondary mb-2">Our team has done this many times, so you never have to guess.</p>
<a href="#" class="btn btn-primary btn-sm">Details</a>
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-aurora-hover { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora-hover::before {
content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: .35;
background:
radial-gradient(closest-side at 30% 40%, rgba(var(--wt-primary-rgb), .9), transparent),
radial-gradient(closest-side at 70% 30%, rgba(var(--wt-accent-rgb), .8), transparent),
radial-gradient(closest-side at 55% 70%, rgba(var(--wt-secondary-rgb), .8), transparent);
filter: blur(24px);
transition: opacity .6s ease;
animation: fx-aurora-hover-drift 12s ease-in-out infinite alternate;
}
.fx-aurora-hover:hover::before, .fx-aurora-hover:focus-within::before { opacity: .85; }
@keyframes fx-aurora-hover-drift {
from { transform: translate(-6%, -4%) rotate(0deg); }
to { transform: translate(6%, 5%) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
.fx-aurora-hover, .fx-aurora-hover::before, .fx-aurora-hover::after, .fx-aurora-hover *, .fx-aurora-hover *::before, .fx-aurora-hover *::after { animation: none !important; transition: none !important; }
}2Color Morphing
Smoothly cycles a background and its glow through the theme colours - nice for badges and CTAs. Class: fx-color-morphing
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<button type="button" class="btn btn-lg border-0 rounded-pill fx-color-morphing">Join the beta</button>
<div class="fx-color-morphing rounded-circle d-grid fs-3" style="width:72px;height:72px;place-items:center">
<i class="bi bi-lightning-charge-fill" aria-hidden="true"></i>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-color-morphing { color: var(--wt-on-primary, #fff); background-color: var(--wt-primary); animation: fx-color-morphing-morph 6s ease-in-out infinite; }
@keyframes fx-color-morphing-morph {
0%, 100% { background-color: var(--wt-primary); box-shadow: 0 10px 24px -10px rgba(var(--wt-primary-rgb), .8); }
33% { background-color: var(--wt-accent); box-shadow: 0 10px 24px -10px rgba(var(--wt-accent-rgb), .8); }
66% { background-color: var(--wt-secondary); box-shadow: 0 10px 24px -10px rgba(var(--wt-secondary-rgb), .8); }
}
@media (prefers-reduced-motion: reduce) {
.fx-color-morphing, .fx-color-morphing::before, .fx-color-morphing::after, .fx-color-morphing *, .fx-color-morphing *::before, .fx-color-morphing *::after { animation: none !important; transition: none !important; }
}3Iridescent
A holographic, pearly sheen that shifts its colours as the card is hovered. Class: fx-iridescent
Rallyium
**** **** **** 2153
Elena Kim
<div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 h-100" style="min-height:200px">
<div class="fx-iridescent rounded-4 p-4 shadow-sm" style="width:15rem">
<div class="d-flex justify-content-between align-items-start mb-4">
<span class="fw-bold">Rallyium</span><i class="bi bi-gem" aria-hidden="true"></i>
</div>
<div class="font-monospace small mb-1">
**** **** **** 2153
</div>
<div class="small">
Elena Kim
</div>
</div>
</div>
/* CSS (already in assets/css/effects.css) */
.fx-iridescent {
position: relative; overflow: hidden; color: #1d1d2b;
background: linear-gradient(120deg, #f6d5f7, #fbe9d7, #d5f2ef, #d7e2fb, #e9d5fb, #f6d5f7);
background-size: 300% 300%; background-position: 0% 50%;
transition: background-position 1.2s ease;
}
.fx-iridescent::after {
content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
background-size: 250% 100%; background-position: 100% 0; transition: background-position 1.2s ease;
}
.fx-iridescent:hover, .fx-iridescent:focus-within { background-position: 100% 50%; }
.fx-iridescent:hover::after, .fx-iridescent:focus-within::after { background-position: 0 0; }
@media (prefers-reduced-motion: reduce) {
.fx-iridescent, .fx-iridescent::before, .fx-iridescent::after, .fx-iridescent *, .fx-iridescent *::before, .fx-iridescent *::after { animation: none !important; transition: none !important; }
}