15 CSS Background Animations 03 / 15

Starry Night / Parallax Space Background

Three star layers built from stacked box-shadow dots scrolling at different speeds for true parallax, plus a drifting nebula glow, twinkling stars, and a recurring shooting star.

Best fordark themes and tech/crypto headers.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="bga-03">
  <div class="bga-03__scene">
    <div class="bga-03__nebula"></div>
    <div class="bga-03__stars"></div>
    <div class="bga-03__stars2"></div>
    <div class="bga-03__stars3"></div>
    <div class="bga-03__shoot"></div>
  </div>
</div>

<div class="bga-03">
  <div class="bga-03__scene">
    <div class="bga-03__nebula"></div>
    <div class="bga-03__stars"></div>
    <div class="bga-03__stars2"></div>
    <div class="bga-03__stars3"></div>
    <div class="bga-03__shoot"></div>
  </div>
</div>

.bga-03, .bga-03 *, .bga-03 *::before, .bga-03 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-03 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-03__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 80%);
}

/* Three star layers built from box-shadow on tiny pseudo dots */
.bga-03__stars, .bga-03__stars2, .bga-03__stars3 {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
}

.bga-03__stars  { box-shadow:
  120px 340px #fff, 700px 120px #fff, 300px 560px #fff, 980px 410px #fff,
  540px 80px #fff, 1300px 300px #fff, 220px 760px #fff, 860px 640px #fff,
  1500px 540px #fff, 60px 200px #fff, 1100px 700px #fff, 400px 250px #fff,
  760px 480px #fff, 1700px 180px #fff, 1000px 60px #fff;
  animation: bga-03-twinkle 4s ease-in-out infinite alternate, bga-03-scrollUp 90s linear infinite;
}
.bga-03__stars2 { box-shadow:
  200px 500px #cfe8ff, 640px 300px #cfe8ff, 1200px 150px #cfe8ff, 480px 700px #cfe8ff,
  900px 520px #cfe8ff, 1450px 380px #cfe8ff, 100px 640px #cfe8ff, 1600px 700px #cfe8ff,
  340px 120px #cfe8ff, 1050px 440px #cfe8ff;
  width: 2px; height: 2px;
  animation: bga-03-twinkle 6s ease-in-out infinite alternate, bga-03-scrollUp 130s linear infinite;
}
.bga-03__stars3 { box-shadow:
  420px 360px #fff7d6, 880px 200px #fff7d6, 1350px 600px #fff7d6, 160px 80px #fff7d6,
  1550px 280px #fff7d6, 720px 700px #fff7d6, 60px 460px #fff7d6;
  width: 3px; height: 3px;
  animation: bga-03-twinkle 5s ease-in-out infinite alternate, bga-03-scrollUp 180s linear infinite;
}

/* A drifting nebula glow for richness */
.bga-03__nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(35% 40% at 25% 30%, rgba(98,71,170,0.35), transparent 60%),
    radial-gradient(40% 45% at 75% 65%, rgba(36,120,160,0.30), transparent 60%),
    radial-gradient(30% 30% at 60% 20%, rgba(170,60,120,0.22), transparent 60%);
  filter: blur(20px);
  animation: bga-03-nebulaShift 40s ease-in-out infinite alternate;
}

/* A lone shooting star */
.bga-03__shoot {
  position: absolute;
  top: 12%; left: 70%;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: rotate(-35deg);
  opacity: 0;
  animation: bga-03-shoot 7s ease-in infinite;
}

@keyframes bga-03-twinkle { 0% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes bga-03-scrollUp { from { transform: translateY(0); } to { transform: translateY(-800px); } }
@keyframes bga-03-nebulaShift {
  0%   { transform: translate(-2%, -1%) scale(1.05); }
  100% { transform: translate(2%, 2%) scale(1.15); }
}
@keyframes bga-03-shoot {
  0%, 85% { opacity: 0; transform: translate(0,0) rotate(-35deg); }
  88%     { opacity: 1; }
  100%    { opacity: 0; transform: translate(-420px, 300px) rotate(-35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-03__stars,
  .bga-03__stars2,
  .bga-03__stars3,
  .bga-03__nebula,
  .bga-03__shoot {
    animation: none !important;
  }
}

.bga-03, .bga-03 *, .bga-03 *::before, .bga-03 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.bga-03 {
  min-height: 460px;
  display: grid;
  place-items: stretch;
}

.bga-03__scene {
  width: 100%;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 80%);
}

/* Three star layers built from box-shadow on tiny pseudo dots */
.bga-03__stars, .bga-03__stars2, .bga-03__stars3 {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  background: transparent;
  border-radius: 50%;
}

.bga-03__stars  { box-shadow:
  120px 340px #fff, 700px 120px #fff, 300px 560px #fff, 980px 410px #fff,
  540px 80px #fff, 1300px 300px #fff, 220px 760px #fff, 860px 640px #fff,
  1500px 540px #fff, 60px 200px #fff, 1100px 700px #fff, 400px 250px #fff,
  760px 480px #fff, 1700px 180px #fff, 1000px 60px #fff;
  animation: bga-03-twinkle 4s ease-in-out infinite alternate, bga-03-scrollUp 90s linear infinite;
}
.bga-03__stars2 { box-shadow:
  200px 500px #cfe8ff, 640px 300px #cfe8ff, 1200px 150px #cfe8ff, 480px 700px #cfe8ff,
  900px 520px #cfe8ff, 1450px 380px #cfe8ff, 100px 640px #cfe8ff, 1600px 700px #cfe8ff,
  340px 120px #cfe8ff, 1050px 440px #cfe8ff;
  width: 2px; height: 2px;
  animation: bga-03-twinkle 6s ease-in-out infinite alternate, bga-03-scrollUp 130s linear infinite;
}
.bga-03__stars3 { box-shadow:
  420px 360px #fff7d6, 880px 200px #fff7d6, 1350px 600px #fff7d6, 160px 80px #fff7d6,
  1550px 280px #fff7d6, 720px 700px #fff7d6, 60px 460px #fff7d6;
  width: 3px; height: 3px;
  animation: bga-03-twinkle 5s ease-in-out infinite alternate, bga-03-scrollUp 180s linear infinite;
}

/* A drifting nebula glow for richness */
.bga-03__nebula {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(35% 40% at 25% 30%, rgba(98,71,170,0.35), transparent 60%),
    radial-gradient(40% 45% at 75% 65%, rgba(36,120,160,0.30), transparent 60%),
    radial-gradient(30% 30% at 60% 20%, rgba(170,60,120,0.22), transparent 60%);
  filter: blur(20px);
  animation: bga-03-nebulaShift 40s ease-in-out infinite alternate;
}

/* A lone shooting star */
.bga-03__shoot {
  position: absolute;
  top: 12%; left: 70%;
  width: 120px; height: 2px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: rotate(-35deg);
  opacity: 0;
  animation: bga-03-shoot 7s ease-in infinite;
}

@keyframes bga-03-twinkle { 0% { opacity: 0.3; } 100% { opacity: 1; } }
@keyframes bga-03-scrollUp { from { transform: translateY(0); } to { transform: translateY(-800px); } }
@keyframes bga-03-nebulaShift {
  0%   { transform: translate(-2%, -1%) scale(1.05); }
  100% { transform: translate(2%, 2%) scale(1.15); }
}
@keyframes bga-03-shoot {
  0%, 85% { opacity: 0; transform: translate(0,0) rotate(-35deg); }
  88%     { opacity: 1; }
  100%    { opacity: 0; transform: translate(-420px, 300px) rotate(-35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bga-03__stars,
  .bga-03__stars2,
  .bga-03__stars3,
  .bga-03__nebula,
  .bga-03__shoot {
    animation: none !important;
  }
}

More from 15 CSS Background Animations

Animated Gradient Backgrounds (Infinite Shifting)Floating Particle or Bubble Effects Interactive or Click-to-Expand Ripple/Static Effects Moving Geometric & Angled Patterns Video-Mimicking / Subtle Wave Overlays Glassmorphism Floating Orbs Background Aurora Borealis Background Animation Matrix Digital Rain Background Animated Mesh Gradient Blob Background Falling Snow Background Animation Animated Blob Morphing Background Retro Cyberpunk Grid / Synthwave Horizon

View the full collection →