Advanced Animated Backgrounds
Animated section backgrounds that sit behind your content and work on light and dark sections alike.
1Gradient
A slow, breathing wash of the primary, secondary and accent colours flowing behind the section. Class: fx-bg-gradient-flow
Gradient flow
The community that makes you stronger
Content stays readable on top of the moving background.
<section class="fx-bg-gradient-flow bg-body border rounded-4 p-4 text-center d-flex flex-column justify-content-center" style="min-height:210px">
<p class="small text-uppercase fw-semibold mb-1 text-body-secondary">Gradient flow</p>
<h3 class="h4 fw-bold mb-2">The community that makes you stronger</h3>
<p class="small mb-3 text-body-secondary">Content stays readable on top of the moving background.</p>
<div>
<a href="#" class="btn btn-primary btn-sm">Get started</a>
</div>
</section>
/* CSS (already in assets/css/effects.css) */
.fx-bg-gradient-flow { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-gradient-flow::before, .fx-bg-gradient-flow::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-gradient-flow::before {
inset: 0;
background: linear-gradient(120deg, rgba(var(--wt-primary-rgb), .30), rgba(var(--wt-secondary-rgb), .22), rgba(var(--wt-accent-rgb), .28), rgba(var(--wt-primary-rgb), .30));
background-size: 300% 300%;
animation: fx-bg-gradient-flow-flow 16s ease infinite;
}
@keyframes fx-bg-gradient-flow-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) {
.fx-bg-gradient-flow, .fx-bg-gradient-flow::before, .fx-bg-gradient-flow::after, .fx-bg-gradient-flow *, .fx-bg-gradient-flow *::before, .fx-bg-gradient-flow *::after { animation: none !important; transition: none !important; }
}2Particles
Two layers of tiny glowing dots drifting upward at different speeds, like dust in light. Class: fx-bg-particles
Particles
Find the workout you will love
Content stays readable on top of the moving background.
<section class="fx-bg-particles bg-dark text-white rounded-4 p-4 text-center d-flex flex-column justify-content-center" style="min-height:210px">
<p class="small text-uppercase fw-semibold mb-1 text-white-50">Particles</p>
<h3 class="h4 fw-bold mb-2">Find the workout you will love</h3>
<p class="small mb-3 text-white-50">Content stays readable on top of the moving background.</p>
<div>
<a href="#" class="btn btn-primary btn-sm">Get started</a>
</div>
</section>
/* CSS (already in assets/css/effects.css) */
.fx-bg-particles { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-particles::before, .fx-bg-particles::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-particles::before, .fx-bg-particles::after { inset: 0; }
.fx-bg-particles::before {
background-image:
radial-gradient(circle at 10% 20%, rgba(var(--wt-primary-rgb), .65) 0 2px, transparent 3px),
radial-gradient(circle at 35% 70%, rgba(var(--wt-accent-rgb), .6) 0 1.5px, transparent 2.5px),
radial-gradient(circle at 60% 35%, rgba(var(--wt-secondary-rgb), .55) 0 2px, transparent 3px),
radial-gradient(circle at 85% 80%, rgba(var(--wt-primary-rgb), .5) 0 1.5px, transparent 2.5px);
background-size: 180px 180px;
animation: fx-bg-particles-near 14s linear infinite;
}
.fx-bg-particles::after {
opacity: .7;
background-image:
radial-gradient(circle at 20% 55%, rgba(var(--wt-accent-rgb), .55) 0 3px, transparent 4px),
radial-gradient(circle at 70% 15%, rgba(var(--wt-primary-rgb), .45) 0 3.5px, transparent 4.5px),
radial-gradient(circle at 50% 90%, rgba(var(--wt-secondary-rgb), .4) 0 2.5px, transparent 3.5px);
background-size: 300px 300px;
animation: fx-bg-particles-far 30s linear infinite;
}
@keyframes fx-bg-particles-near { to { background-position: 0 -180px; } }
@keyframes fx-bg-particles-far { to { background-position: 0 -300px; } }
@media (prefers-reduced-motion: reduce) {
.fx-bg-particles, .fx-bg-particles::before, .fx-bg-particles::after, .fx-bg-particles *, .fx-bg-particles *::before, .fx-bg-particles *::after { animation: none !important; transition: none !important; }
}