15 CSS Background Animations 14 / 15
Infinite Scrolling Diagonal Text / Marquee Background
Huge outline-style headlines tilted at an angle, with alternating rows scrolling in opposite directions in a seamless pure-CSS translateX loop.
The code
<div class="bga-14">
<div class="bga-14__scene">
<div class="bga-14__stage">
<div class="bga-14__row bga-14__left">
<span>Creative • Design • Code • </span>
<span>Creative • Design • Code • </span>
</div>
<div class="bga-14__row bga-14__right">
<span>Build • Ship • Repeat • </span>
<span>Build • Ship • Repeat • </span>
</div>
<div class="bga-14__row bga-14__left">
<span>Pure CSS • No JS • </span>
<span>Pure CSS • No JS • </span>
</div>
<div class="bga-14__row bga-14__right">
<span>Studio • Agency • Web • </span>
<span>Studio • Agency • Web • </span>
</div>
<div class="bga-14__row bga-14__left">
<span>Creative • Design • Code • </span>
<span>Creative • Design • Code • </span>
</div>
<div class="bga-14__row bga-14__right">
<span>Build • Ship • Repeat • </span>
<span>Build • Ship • Repeat • </span>
</div>
</div>
</div>
</div> <div class="bga-14">
<div class="bga-14__scene">
<div class="bga-14__stage">
<div class="bga-14__row bga-14__left">
<span>Creative • Design • Code • </span>
<span>Creative • Design • Code • </span>
</div>
<div class="bga-14__row bga-14__right">
<span>Build • Ship • Repeat • </span>
<span>Build • Ship • Repeat • </span>
</div>
<div class="bga-14__row bga-14__left">
<span>Pure CSS • No JS • </span>
<span>Pure CSS • No JS • </span>
</div>
<div class="bga-14__row bga-14__right">
<span>Studio • Agency • Web • </span>
<span>Studio • Agency • Web • </span>
</div>
<div class="bga-14__row bga-14__left">
<span>Creative • Design • Code • </span>
<span>Creative • Design • Code • </span>
</div>
<div class="bga-14__row bga-14__right">
<span>Build • Ship • Repeat • </span>
<span>Build • Ship • Repeat • </span>
</div>
</div>
</div>
</div>.bga-14, .bga-14 *, .bga-14 *::before, .bga-14 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-14 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-14__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: #0e0e10;
display: flex;
align-items: center;
justify-content: center;
}
/* Rotated stage holding several marquee rows */
.bga-14__stage {
position: absolute;
width: 160%;
height: 160%;
transform: rotate(-25deg);
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.bga-14__row {
display: flex;
white-space: nowrap;
will-change: transform;
}
.bga-14__row span {
font-family: "Arial Black", Impact, sans-serif;
font-size: 84px;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
padding-right: 40px;
/* Outline text */
color: transparent;
-webkit-text-stroke: 2px rgba(255,255,255,0.18);
}
/* Alternate rows: filled accent + opposite scroll direction */
.bga-14__row:nth-child(even) span {
color: rgba(255,60,140,0.22);
-webkit-text-stroke: 0;
}
.bga-14__left { animation: bga-14-scrollLeft 24s linear infinite; }
.bga-14__right { animation: bga-14-scrollRight 24s linear infinite; }
@keyframes bga-14-scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bga-14-scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.bga-14__left,
.bga-14__right {
animation: none !important;
}
} .bga-14, .bga-14 *, .bga-14 *::before, .bga-14 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-14 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-14__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: #0e0e10;
display: flex;
align-items: center;
justify-content: center;
}
/* Rotated stage holding several marquee rows */
.bga-14__stage {
position: absolute;
width: 160%;
height: 160%;
transform: rotate(-25deg);
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.bga-14__row {
display: flex;
white-space: nowrap;
will-change: transform;
}
.bga-14__row span {
font-family: "Arial Black", Impact, sans-serif;
font-size: 84px;
font-weight: 900;
letter-spacing: 4px;
text-transform: uppercase;
padding-right: 40px;
/* Outline text */
color: transparent;
-webkit-text-stroke: 2px rgba(255,255,255,0.18);
}
/* Alternate rows: filled accent + opposite scroll direction */
.bga-14__row:nth-child(even) span {
color: rgba(255,60,140,0.22);
-webkit-text-stroke: 0;
}
.bga-14__left { animation: bga-14-scrollLeft 24s linear infinite; }
.bga-14__right { animation: bga-14-scrollRight 24s linear infinite; }
@keyframes bga-14-scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bga-14-scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
.bga-14__left,
.bga-14__right {
animation: none !important;
}
}More from 15 CSS Background Animations
Aurora Borealis Background AnimationMatrix Digital Rain BackgroundAnimated Mesh Gradient Blob BackgroundFalling Snow Background AnimationAnimated Blob Morphing BackgroundRetro Cyberpunk Grid / Synthwave HorizonAnimated Comic Book Dot / Halftone WaveAnimated Gradient Backgrounds (Infinite Shifting)Floating Particle or Bubble EffectsStarry Night / Parallax Space BackgroundInteractive or Click-to-Expand Ripple/Static EffectsMoving Geometric & Angled Patterns
View the full collection →