15 CSS Background Animations 08 / 15
Aurora Borealis Background Animation
Layered screen-blended ribbons skew and stretch like northern lights over a twinkling star field on a deep night-sky gradient.
The code
<div class="bga-08">
<div class="bga-08__scene">
<div class="bga-08__stars"></div>
<div class="bga-08__aurora bga-08__a1"></div>
<div class="bga-08__aurora bga-08__a2"></div>
<div class="bga-08__aurora bga-08__a3"></div>
</div>
</div> <div class="bga-08">
<div class="bga-08__scene">
<div class="bga-08__stars"></div>
<div class="bga-08__aurora bga-08__a1"></div>
<div class="bga-08__aurora bga-08__a2"></div>
<div class="bga-08__aurora bga-08__a3"></div>
</div>
</div>.bga-08, .bga-08 *, .bga-08 *::before, .bga-08 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-08 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-08__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #020111 0%, #06183b 55%, #0a2a4a 100%);
}
/* Stacked aurora ribbons made of conic/linear gradients */
.bga-08__aurora {
position: absolute;
top: -20%; left: -20%;
width: 140%; height: 100%;
filter: blur(40px);
mix-blend-mode: screen;
}
.bga-08__a1 {
background: linear-gradient(120deg, transparent, #00ff9d 40%, #00b3ff 60%, transparent);
opacity: 0.5;
animation: bga-08-wave1 12s ease-in-out infinite alternate;
}
.bga-08__a2 {
background: linear-gradient(100deg, transparent, #b14aff 45%, #ff6ec4 65%, transparent);
opacity: 0.4;
animation: bga-08-wave2 16s ease-in-out infinite alternate;
}
.bga-08__a3 {
background: linear-gradient(140deg, transparent, #2ed8ff 35%, #6cff9e 55%, transparent);
opacity: 0.35;
animation: bga-08-wave3 20s ease-in-out infinite alternate;
}
/* Star field below the aurora */
.bga-08__stars {
position: absolute;
top: 0; left: 0; width: 1px; height: 1px;
box-shadow:
140px 120px #fff, 480px 60px #fff, 900px 180px #fff, 1300px 90px #fff,
260px 220px #fff, 720px 260px #fff, 1100px 240px #fff, 60px 300px #fff,
1500px 200px #fff, 600px 140px #fff;
animation: bga-08-twinkle 5s ease-in-out infinite alternate;
}
@keyframes bga-08-wave1 {
0% { transform: translateX(-10%) skewX(-8deg) scaleY(1); }
100% { transform: translateX(10%) skewX(8deg) scaleY(1.2); }
}
@keyframes bga-08-wave2 {
0% { transform: translateX(8%) skewX(6deg) scaleY(1.1); }
100% { transform: translateX(-12%) skewX(-10deg) scaleY(0.9); }
}
@keyframes bga-08-wave3 {
0% { transform: translateX(-5%) skewX(-4deg) scaleY(0.95); }
100% { transform: translateX(14%) skewX(12deg) scaleY(1.25); }
}
@keyframes bga-08-twinkle { 0% { opacity: 0.4; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.bga-08__a1,
.bga-08__a2,
.bga-08__a3,
.bga-08__stars {
animation: none !important;
}
} .bga-08, .bga-08 *, .bga-08 *::before, .bga-08 *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.bga-08 {
min-height: 460px;
display: grid;
place-items: stretch;
}
.bga-08__scene {
width: 100%;
min-height: 460px;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, #020111 0%, #06183b 55%, #0a2a4a 100%);
}
/* Stacked aurora ribbons made of conic/linear gradients */
.bga-08__aurora {
position: absolute;
top: -20%; left: -20%;
width: 140%; height: 100%;
filter: blur(40px);
mix-blend-mode: screen;
}
.bga-08__a1 {
background: linear-gradient(120deg, transparent, #00ff9d 40%, #00b3ff 60%, transparent);
opacity: 0.5;
animation: bga-08-wave1 12s ease-in-out infinite alternate;
}
.bga-08__a2 {
background: linear-gradient(100deg, transparent, #b14aff 45%, #ff6ec4 65%, transparent);
opacity: 0.4;
animation: bga-08-wave2 16s ease-in-out infinite alternate;
}
.bga-08__a3 {
background: linear-gradient(140deg, transparent, #2ed8ff 35%, #6cff9e 55%, transparent);
opacity: 0.35;
animation: bga-08-wave3 20s ease-in-out infinite alternate;
}
/* Star field below the aurora */
.bga-08__stars {
position: absolute;
top: 0; left: 0; width: 1px; height: 1px;
box-shadow:
140px 120px #fff, 480px 60px #fff, 900px 180px #fff, 1300px 90px #fff,
260px 220px #fff, 720px 260px #fff, 1100px 240px #fff, 60px 300px #fff,
1500px 200px #fff, 600px 140px #fff;
animation: bga-08-twinkle 5s ease-in-out infinite alternate;
}
@keyframes bga-08-wave1 {
0% { transform: translateX(-10%) skewX(-8deg) scaleY(1); }
100% { transform: translateX(10%) skewX(8deg) scaleY(1.2); }
}
@keyframes bga-08-wave2 {
0% { transform: translateX(8%) skewX(6deg) scaleY(1.1); }
100% { transform: translateX(-12%) skewX(-10deg) scaleY(0.9); }
}
@keyframes bga-08-wave3 {
0% { transform: translateX(-5%) skewX(-4deg) scaleY(0.95); }
100% { transform: translateX(14%) skewX(12deg) scaleY(1.25); }
}
@keyframes bga-08-twinkle { 0% { opacity: 0.4; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.bga-08__a1,
.bga-08__a2,
.bga-08__a3,
.bga-08__stars {
animation: none !important;
}
}More from 15 CSS Background Animations
Matrix Digital Rain BackgroundAnimated Mesh Gradient Blob BackgroundFalling Snow Background AnimationAnimated Blob Morphing BackgroundRetro Cyberpunk Grid / Synthwave HorizonInfinite Scrolling Diagonal Text / Marquee BackgroundAnimated 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 →