Advanced Animated Backgrounds
Animated section backgrounds that sit behind your content and work on light and dark sections alike.
1Shapes
Rings, dots, squares and triangles in theme colours float and turn slowly behind the content. Class: fx-bg-shapes
Floating shapes
Explore more, worry less
Content stays readable on top of the moving background.
<section class="fx-bg-shapes 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">Floating shapes</p>
<h3 class="h4 fw-bold mb-2">Explore more, worry less</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-shapes { position: relative; isolation: isolate; overflow: hidden; }
.fx-bg-shapes::before, .fx-bg-shapes::after { content: ""; position: absolute; pointer-events: none; z-index: -1; }
.fx-bg-shapes::before, .fx-bg-shapes::after { inset: -10%; background-repeat: no-repeat; }
.fx-bg-shapes::before {
background-image:
radial-gradient(circle, transparent 0 38%, rgba(var(--wt-primary-rgb), .35) 40% 50%, transparent 52%),
radial-gradient(circle, rgba(var(--wt-accent-rgb), .35) 0 48%, transparent 50%),
conic-gradient(from 150deg at 50% 0, rgba(var(--wt-secondary-rgb), .3) 0 60deg, transparent 0);
background-size: 90px 90px, 34px 34px, 70px 60px;
background-position: 12% 22%, 82% 18%, 70% 82%;
animation: fx-bg-shapes-float 12s ease-in-out infinite alternate;
}
.fx-bg-shapes::after {
background-image:
linear-gradient(rgba(var(--wt-secondary-rgb), .22), rgba(var(--wt-secondary-rgb), .22)),
radial-gradient(circle, transparent 0 40%, rgba(var(--wt-accent-rgb), .3) 42% 52%, transparent 54%),
radial-gradient(circle, rgba(var(--wt-primary-rgb), .3) 0 48%, transparent 50%);
background-size: 38px 38px, 60px 60px, 22px 22px;
background-position: 88% 62%, 22% 80%, 45% 12%;
animation: fx-bg-shapes-turn 18s ease-in-out infinite alternate;
}
@keyframes fx-bg-shapes-float { to { transform: translate(3%, -5%) rotate(6deg); } }
@keyframes fx-bg-shapes-turn { to { transform: translate(-4%, 4%) rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
.fx-bg-shapes, .fx-bg-shapes::before, .fx-bg-shapes::after, .fx-bg-shapes *, .fx-bg-shapes *::before, .fx-bg-shapes *::after { animation: none !important; transition: none !important; }
}2Parallax
Three layers of dots and soft orbs drift at different speeds, giving the section a sense of depth. Class: fx-bg-parallax
Parallax depth
Find your next escape
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">Find your next escape</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; }
}