Advanced Animated Backgrounds
Animated section backgrounds that sit behind your content and work on light and dark sections alike.
1Particles
Two layers of tiny glowing dots drifting upward at different speeds, like dust in light. Class: fx-bg-particles
Particles
Design that earns attention
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">Design that earns attention</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; }
}2Scrolling
A fine blueprint grid that scrolls diagonally forever and fades out towards the edges. Class: fx-bg-scrolling
Scrolling grid
We make good brands great
Content stays readable on top of the moving background.
<section class="fx-bg-scrolling 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">Scrolling grid</p>
<h3 class="h4 fw-bold mb-2">We make good brands great</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-scrolling { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-scrolling::before, .fx-bg-scrolling::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-scrolling::before {
inset: 0;
background-image:
linear-gradient(rgba(var(--wt-primary-rgb), .16) 1px, transparent 1px),
linear-gradient(90deg, rgba(var(--wt-primary-rgb), .16) 1px, transparent 1px);
background-size: 36px 36px;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
animation: fx-bg-scrolling-scroll 6s linear infinite;
}
@keyframes fx-bg-scrolling-scroll { to { background-position: 36px 36px; } }
@media (prefers-reduced-motion: reduce) {
.fx-bg-scrolling, .fx-bg-scrolling::before, .fx-bg-scrolling::after, .fx-bg-scrolling *, .fx-bg-scrolling *::before, .fx-bg-scrolling *::after { animation: none !important; transition: none !important; }
}