15 CSS Background Animations 05 / 15
Moving Geometric & Angled Patterns
Three stacked layers — sliding diagonal stripes, a scrolling grid, and animated chevrons — combining into a structured, infinitely scrolling tech texture with a vignette glow.
The code
<div class="bga-05">
<div class="bga-05__scene">
<div class="bga-05__grid"></div>
<div class="bga-05__chevrons"></div>
<div class="bga-05__glow"></div>
</div>
</div> <div class="bga-05">
<div class="bga-05__scene">
<div class="bga-05__grid"></div>
<div class="bga-05__chevrons"></div>
<div class="bga-05__glow"></div>
</div>
</div>.bga-05, .bga-05 *, .bga-05 *::before, .bga-05 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-05 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-05__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: #11131c;
}
/* Layer 1: moving diagonal stripes */
.bga-05__scene::before {
content: "";
position: absolute;
inset: -50%;
background: repeating-linear-gradient(
45deg,
rgba(255,90,120,0.12) 0 20px,
transparent 20px 40px
);
animation: bga-05-slideDiag 6s linear infinite;
}
/* Layer 2: scrolling grid */
.bga-05__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(80,200,255,0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(80,200,255,0.18) 1px, transparent 1px);
background-size: 48px 48px;
animation: bga-05-scrollGrid 8s linear infinite;
}
/* Layer 3: animated chevrons */
.bga-05__chevrons {
position: absolute;
inset: -40px;
background-image:
linear-gradient(135deg, rgba(255,200,60,0.16) 25%, transparent 25%),
linear-gradient(225deg, rgba(255,200,60,0.16) 25%, transparent 25%);
background-size: 60px 60px;
background-position: 0 0;
animation: bga-05-chevronMove 5s linear infinite;
mix-blend-mode: screen;
}
/* Center glow to add depth */
.bga-05__glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(17,19,28,0.9) 100%);
pointer-events: none;
}
@keyframes bga-05-slideDiag {
from { transform: translate(0,0); }
to { transform: translate(56px, 56px); }
}
@keyframes bga-05-scrollGrid {
from { background-position: 0 0, 0 0; }
to { background-position: 48px 48px, 48px 48px; }
}
@keyframes bga-05-chevronMove {
from { background-position: 0 0; }
to { background-position: 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
.bga-05__scene::before,
.bga-05__grid,
.bga-05__chevrons {
animation: none !important;
}
} .bga-05, .bga-05 *, .bga-05 *::before, .bga-05 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-05 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-05__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: #11131c;
}
/* Layer 1: moving diagonal stripes */
.bga-05__scene::before {
content: "";
position: absolute;
inset: -50%;
background: repeating-linear-gradient(
45deg,
rgba(255,90,120,0.12) 0 20px,
transparent 20px 40px
);
animation: bga-05-slideDiag 6s linear infinite;
}
/* Layer 2: scrolling grid */
.bga-05__grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(80,200,255,0.18) 1px, transparent 1px),
linear-gradient(90deg, rgba(80,200,255,0.18) 1px, transparent 1px);
background-size: 48px 48px;
animation: bga-05-scrollGrid 8s linear infinite;
}
/* Layer 3: animated chevrons */
.bga-05__chevrons {
position: absolute;
inset: -40px;
background-image:
linear-gradient(135deg, rgba(255,200,60,0.16) 25%, transparent 25%),
linear-gradient(225deg, rgba(255,200,60,0.16) 25%, transparent 25%);
background-size: 60px 60px;
background-position: 0 0;
animation: bga-05-chevronMove 5s linear infinite;
mix-blend-mode: screen;
}
/* Center glow to add depth */
.bga-05__glow {
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(17,19,28,0.9) 100%);
pointer-events: none;
}
@keyframes bga-05-slideDiag {
from { transform: translate(0,0); }
to { transform: translate(56px, 56px); }
}
@keyframes bga-05-scrollGrid {
from { background-position: 0 0, 0 0; }
to { background-position: 48px 48px, 48px 48px; }
}
@keyframes bga-05-chevronMove {
from { background-position: 0 0; }
to { background-position: 0 60px; }
}
@media (prefers-reduced-motion: reduce) {
.bga-05__scene::before,
.bga-05__grid,
.bga-05__chevrons {
animation: none !important;
}
}More from 15 CSS Background Animations
Animated Gradient Backgrounds (Infinite Shifting)Floating Particle or Bubble EffectsStarry Night / Parallax Space BackgroundInteractive or Click-to-Expand Ripple/Static EffectsVideo-Mimicking / Subtle Wave OverlaysGlassmorphism Floating Orbs BackgroundAurora Borealis Background AnimationMatrix Digital Rain BackgroundAnimated Mesh Gradient Blob BackgroundFalling Snow Background AnimationAnimated Blob Morphing BackgroundRetro Cyberpunk Grid / Synthwave Horizon
View the full collection →