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
Dinner worth getting dressed up for
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">Dinner worth getting dressed up for</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; }
}2Scrolling
A fine blueprint grid that scrolls diagonally forever and fades out towards the edges. Class: fx-bg-scrolling
Scrolling grid
Come hungry, leave happy
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">Come hungry, leave happy</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; }
}