Advanced Animated Backgrounds
Animated section backgrounds that sit behind your content and work on light and dark sections alike.
1Wave/Blob
Soft colour blobs morph in the background while two layers of waves roll along the bottom edge. Class: fx-bg-wave-blob
Wave and blob
Ship faster with less busywork
Content stays readable on top of the moving background.
<section class="fx-bg-wave-blob 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">Wave and blob</p>
<h3 class="h4 fw-bold mb-2">Ship faster with less busywork</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-wave-blob { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-wave-blob::before, .fx-bg-wave-blob::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-wave-blob::before {
width: 55%; aspect-ratio: 1; top: -25%; left: -12%;
background: radial-gradient(circle at 50% 50%, rgba(var(--wt-primary-rgb), .32), transparent 68%);
border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
animation: fx-bg-wave-blob-blob 14s ease-in-out infinite alternate;
}
.fx-bg-wave-blob::after {
left: 0; right: 0; bottom: 0; height: 60px;
background:
radial-gradient(84px 18px at 50% 100%, rgba(var(--wt-primary-rgb), .2) 99%, transparent 101%) 0 100% / 160px 30px repeat-x,
radial-gradient(118px 24px at 50% 100%, rgba(var(--wt-accent-rgb), .18) 99%, transparent 101%) 0 100% / 220px 40px repeat-x,
linear-gradient(rgba(var(--wt-primary-rgb), .14), rgba(var(--wt-primary-rgb), .14)) 0 100% / 100% 12px no-repeat;
animation: fx-bg-wave-blob-wave 9s linear infinite;
}
@keyframes fx-bg-wave-blob-blob {
0% { transform: translate(0, 0) rotate(0deg); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
50% { border-radius: 70% 30% 46% 54% / 30% 39% 61% 70%; }
100% { transform: translate(110%, 35%) rotate(60deg); border-radius: 30% 70% 70% 30% / 53% 30% 70% 47%; }
}
@keyframes fx-bg-wave-blob-wave { to { background-position: 160px 100%, -220px 100%, 0 100%; } }
@media (prefers-reduced-motion: reduce) {
.fx-bg-wave-blob, .fx-bg-wave-blob::before, .fx-bg-wave-blob::after, .fx-bg-wave-blob *, .fx-bg-wave-blob *::before, .fx-bg-wave-blob *::after { animation: none !important; transition: none !important; }
}2Glitch
Faint scanlines with short bursts of shifted colour bands - a cyber look that keeps the text calm. Class: fx-bg-glitch
Glitch
Know what is happening, without asking
Content stays readable on top of the moving background.
<section class="fx-bg-glitch 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">Glitch</p>
<h3 class="h4 fw-bold mb-2">Know what is happening, without asking</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-glitch { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-glitch::before, .fx-bg-glitch::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-glitch::before {
inset: 0;
background: repeating-linear-gradient(0deg, rgba(var(--wt-primary-rgb), .07) 0 2px, transparent 2px 5px);
}
.fx-bg-glitch::after {
inset: 0;
background: linear-gradient(90deg, rgba(var(--wt-accent-rgb), .22), rgba(var(--wt-primary-rgb), .22) 50%, rgba(var(--wt-secondary-rgb), .22));
-webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0);
animation: fx-bg-glitch-bands 4s steps(1) infinite;
}
@keyframes fx-bg-glitch-bands {
0%, 70%, 100% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); transform: none; }
72% { -webkit-clip-path: inset(12% 0 78% 0); clip-path: inset(12% 0 78% 0); transform: translateX(-3%); }
75% { -webkit-clip-path: inset(58% 0 30% 0); clip-path: inset(58% 0 30% 0); transform: translateX(4%); }
78% { -webkit-clip-path: inset(30% 0 62% 0); clip-path: inset(30% 0 62% 0); transform: translateX(-2%); }
81% { -webkit-clip-path: inset(80% 0 6% 0); clip-path: inset(80% 0 6% 0); transform: translateX(3%); }
84% { -webkit-clip-path: inset(50% 0 50% 0); clip-path: inset(50% 0 50% 0); }
}
@media (prefers-reduced-motion: reduce) {
.fx-bg-glitch, .fx-bg-glitch::before, .fx-bg-glitch::after, .fx-bg-glitch *, .fx-bg-glitch *::before, .fx-bg-glitch *::after { animation: none !important; transition: none !important; }
}3Parallax
Three layers of dots and soft orbs drift at different speeds, giving the section a sense of depth. Class: fx-bg-parallax
Parallax depth
Automate the boring parts of work
Content stays readable on top of the moving background.
<section class="fx-bg-parallax 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">Parallax depth</p>
<h3 class="h4 fw-bold mb-2">Automate the boring parts of work</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-parallax { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-parallax::before, .fx-bg-parallax::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-parallax::before {
inset: 0;
background-image:
radial-gradient(circle, rgba(var(--wt-primary-rgb), .35) 0 1px, transparent 1.5px),
radial-gradient(circle, rgba(var(--wt-secondary-rgb), .4) 0 2px, transparent 2.5px);
background-size: 24px 24px, 70px 70px;
animation: fx-bg-parallax-layers 20s linear infinite;
}
.fx-bg-parallax::after {
inset: 0;
background-image:
radial-gradient(circle, rgba(var(--wt-accent-rgb), .22) 0 18px, transparent 32px),
radial-gradient(circle, rgba(var(--wt-primary-rgb), .18) 0 26px, transparent 44px);
background-size: 220px 220px, 340px 340px;
background-position: 30px 60px, 180px 10px;
animation: fx-bg-parallax-near 20s linear infinite;
}
@keyframes fx-bg-parallax-layers { to { background-position: -24px 0, -140px 0; } }
@keyframes fx-bg-parallax-near { to { background-position: -410px 60px, -500px 10px; } }
@media (prefers-reduced-motion: reduce) {
.fx-bg-parallax, .fx-bg-parallax::before, .fx-bg-parallax::after, .fx-bg-parallax *, .fx-bg-parallax *::before, .fx-bg-parallax *::after { animation: none !important; transition: none !important; }
}