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
Three days that change how you work
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">Three days that change how you 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-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; }
}2Glitch
Faint scanlines with short bursts of shifted colour bands - a cyber look that keeps the text calm. Class: fx-bg-glitch
Glitch
Where great ideas meet
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">Where great ideas meet</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; }
}