AI CSS Animations

Milky Way Background

A diagonal band of the Milky Way drifts across a dark sky: dense star dust, a warm glowing core and dark dust lanes, with loose stars twinkling around it. Star tiles slide by one tile per loop.

Also known as: css galaxy animation, milky way css, galaxy band background, night sky galaxy css.

HTML

<div class="bgx-milky-way" aria-hidden="true">
  <span class="bgx-milky-way-band"><span class="bgx-milky-way-dust"></span></span>
</div>

CSS

.bgx-milky-way {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse 120% 90% at 50% 50%, color-mix(in srgb, var(--c) 14%, #070814), #020208 70%);}
.bgx-milky-way::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle 0.05em at 26.1% 16.3%, #fff 40%, transparent),
    radial-gradient(circle 0.05em at 91.2% 14.9%, #fff 40%, transparent),
    radial-gradient(circle 0.07em at 48.8% 91.4%, #fff 40%, transparent),
    radial-gradient(circle 0.07em at 8.7% 88.2%, #fff 40%, transparent),
    radial-gradient(circle 0.07em at 34.5% 20.7%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 38.5% 11.5%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 26.6% 76.1%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 4.4% 86.5%, #fff 40%, transparent),
    radial-gradient(circle 0.07em at 78.4% 64.6%, #fff 40%, transparent),
    radial-gradient(circle 0.06em at 23.2% 92.4%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 9.6% 81.8%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 61.5% 94.6%, #fff 40%, transparent);
  background-size: 14em 10em;
  animation: bgx-milky-way-twinkle 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bgx-milky-way-band {
  position: absolute;
  left: -40%;
  right: -40%;
  top: 50%;
  height: 9em;
  margin-top: -4.5em;
  rotate: -18deg;
  overflow: hidden;
  background:
    radial-gradient(ellipse 22% 60% at 50% 50%, oklch(from var(--c) 0.85 0.08 calc(h - 150) / 0.55), transparent),
    linear-gradient(transparent, oklch(from var(--c) 0.55 0.12 calc(h + 0) / 0.35) 30%, oklch(from var(--c) 0.8 0.06 calc(h - 150) / 0.4) 50%, oklch(from var(--c) 0.55 0.12 calc(h + 40) / 0.35) 70%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
  mask: linear-gradient(90deg, transparent, #000 25% 75%, transparent);
  animation: bgx-milky-way-core 6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bgx-milky-way-band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 9% 9% at 30% 47%, rgb(2 2 8 / 0.6), transparent),
    radial-gradient(ellipse 14% 7% at 44% 54%, rgb(2 2 8 / 0.55), transparent),
    radial-gradient(ellipse 6% 12% at 52% 44%, rgb(2 2 8 / 0.5), transparent),
    radial-gradient(ellipse 18% 6% at 63% 51%, rgb(2 2 8 / 0.6), transparent),
    radial-gradient(ellipse 8% 8% at 74% 56%, rgb(2 2 8 / 0.45), transparent);
  filter: blur(0.3em);
}
.bgx-milky-way-dust {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(100% + 12em);
  background-image:
    radial-gradient(circle 0.03em at 95% 75.3%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 60.2% 64.1%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 51.8% 5%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.03em at 4.2% 10.6%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 22.5% 19.5%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.03em at 54.4% 92.6%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.07em at 72.3% 53.4%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 95.1% 12.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.03em at 79.9% 92.8%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 78.9% 48.6%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 44% 24.9%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.04em at 8.9% 72.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 69.3% 57.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.07em at 31.8% 69.4%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 17.4% 70.3%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 58.6% 89%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.04em at 54.4% 43.7%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 53% 70.4%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 63.9% 80.1%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.07em at 41.4% 44%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.03em at 74.5% 45.1%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.03em at 46.7% 49.5%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.05em at 52.1% 26.5%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.06em at 33.3% 74.2%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.04em at 75.4% 12%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.04em at 36.8% 26.3%, rgb(255 255 255 / 0.9) 40%, transparent),
    radial-gradient(circle 0.02em at 25.3% 42.4%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.04em at 41.5% 7.6%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 28.2% 80.1%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 49.9% 34.4%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.04em at 23.5% 38.5%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 40.6% 82.5%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 49.2% 93.7%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 31.3% 5.7%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 91.5% 61.6%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 8.9% 80.3%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 83% 66.7%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.04em at 45.2% 79.3%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.02em at 45.2% 53.5%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 93.5% 67.1%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 54% 30.5%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.05em at 83.9% 53.8%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.04em at 19% 35.6%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.02em at 13.7% 59.9%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 93.5% 27%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.02em at 85.5% 46.4%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.02em at 29.8% 34.7%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.02em at 89% 77.8%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 7.5% 20.9%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 41% 32.9%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 75.6% 54.4%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.02em at 51.3% 8.4%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.05em at 11.6% 76.2%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 30.7% 53.2%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.03em at 20.5% 62.3%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent),
    radial-gradient(circle 0.04em at 31.8% 48.5%, color-mix(in srgb, var(--c) 30%, #fff) 40%, transparent);
  background-size: 6em 4.5em, 4em 3em;
  -webkit-mask: linear-gradient(transparent, #000 30% 70%, transparent);
  mask: linear-gradient(transparent, #000 30% 70%, transparent);
  animation: bgx-milky-way-drift 36s linear infinite;
}
@keyframes bgx-milky-way-drift {
  to { transform: translateX(-12em); }
}
@keyframes bgx-milky-way-twinkle {
  from { opacity: 0.4; }
  to   { opacity: 0.9; }
}
@keyframes bgx-milky-way-core {
  from { opacity: 0.8; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-milky-way, .bgx-milky-way::before, .bgx-milky-way::after, .bgx-milky-way *, .bgx-milky-way *::before, .bgx-milky-way *::after { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-milky-way, .bgx-milky-way *, .bgx-milky-way::before, .bgx-milky-way::after, .bgx-milky-way *::before, .bgx-milky-way *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

  • Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
  • Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
  • Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
  • Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Similar animated backgrounds

Parallax Starfield Background
Shooting Stars Background
Twinkling Stars Background
Spiral Galaxy Background