AI CSS Animations

Starfield Zoom Background

The flying starfield screensaver: stars stream out of the dark center and grow as they pass, so you seem to glide through space. Four star layers scale up on a shared loop and fade at both ends.

Also known as: warp speed background, flying through stars css, starfield screensaver css, css stars background.

HTML

<div class="bgx-starfield-zoom" aria-hidden="true"><span></span><span></span><span></span><span></span></div>

CSS

.bgx-starfield-zoom {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--c) 22%, #070a18), #010207 65%);}
.bgx-starfield-zoom span {
  position: absolute;
  inset: -150%;
  background-size: 8em 8em;
  opacity: 0;
  animation: bgx-starfield-zoom-fly 8s linear calc(var(--i) * -2s) infinite;
}
.bgx-starfield-zoom span:nth-child(1) {
  --i: 0;
  background-image:
    radial-gradient(circle 0.05em at 88.4% 96.4%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 67.9% 12.1%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 14.9% 27.6%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 28.3% 53.6%, #fff 40%, transparent),
    radial-gradient(circle 0.08em at 73.7% 61.9%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 71.4% 40%, #fff 40%, transparent),
    radial-gradient(circle 0.06em at 77.1% 81.8%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 19.1% 37.4%, #fff 40%, transparent),
    radial-gradient(circle 0.06em at 85.2% 59.5%, #fff 40%, transparent),
    radial-gradient(circle 0.07em at 38.3% 9.6%, #fff 40%, transparent),
    radial-gradient(circle 0.06em at 7.1% 61.6%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 89.6% 10.6%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 25.9% 23%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 80.9% 56.9%, #fff 40%, transparent);
}
.bgx-starfield-zoom span:nth-child(2) {
  --i: 1;
  background-image:
    radial-gradient(circle 0.05em at 13.7% 59.3%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.06em at 24.6% 72.9%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.09em at 44.8% 61.8%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.09em at 67.6% 62.7%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.06em at 48.7% 40.6%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.11em at 22.9% 24.2%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.09em at 3.6% 90.1%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.1em at 76.4% 83.2%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.08em at 76.6% 53.1%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.11em at 31.6% 78.1%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.08em at 36.9% 94%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.1em at 42.3% 52.8%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.05em at 91% 26%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.05em at 50.9% 67.7%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent);
}
.bgx-starfield-zoom span:nth-child(3) {
  --i: 2;
  background-image:
    radial-gradient(circle 0.05em at 77.7% 20.1%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 62.9% 51.5%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 7.3% 28.6%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 56.7% 64.5%, #fff 40%, transparent),
    radial-gradient(circle 0.09em at 10.6% 93.3%, #fff 40%, transparent),
    radial-gradient(circle 0.05em at 4% 5.5%, #fff 40%, transparent),
    radial-gradient(circle 0.08em at 93.1% 35.4%, #fff 40%, transparent),
    radial-gradient(circle 0.06em at 6.3% 61.1%, #fff 40%, transparent),
    radial-gradient(circle 0.08em at 57.9% 12.2%, #fff 40%, transparent),
    radial-gradient(circle 0.11em at 56.4% 70.9%, #fff 40%, transparent),
    radial-gradient(circle 0.06em at 62.2% 27.7%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 94.3% 65.7%, #fff 40%, transparent),
    radial-gradient(circle 0.1em at 59.7% 32.4%, #fff 40%, transparent),
    radial-gradient(circle 0.05em at 21.9% 85.1%, #fff 40%, transparent);
}
.bgx-starfield-zoom span:nth-child(4) {
  --i: 3;
  background-image:
    radial-gradient(circle 0.05em at 3% 77%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.07em at 19.6% 18.3%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.09em at 37.2% 62.8%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.1em at 96% 73.7%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.07em at 79.6% 72%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.06em at 49.6% 83.6%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.11em at 19.7% 43.8%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.07em at 63.6% 12.9%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.11em at 49.3% 5.8%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.09em at 49.6% 45.4%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.07em at 92% 60.1%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.11em at 47% 13.9%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.06em at 30.7% 35.4%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent),
    radial-gradient(circle 0.08em at 85.9% 96%, color-mix(in srgb, var(--c) 35%, #fff) 40%, transparent);
}
.bgx-starfield-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgb(1 2 7 / 0.6));
}
@keyframes bgx-starfield-zoom-fly {
  0%   { transform: scale(0.25); opacity: 0; }
  25%  { opacity: 1; }
  33%  { transform: scale(0.5); }
  66%  { transform: scale(1); }
  85%  { opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bgx-starfield-zoom, .bgx-starfield-zoom::before, .bgx-starfield-zoom::after, .bgx-starfield-zoom *, .bgx-starfield-zoom *::before, .bgx-starfield-zoom *::after { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-starfield-zoom, .bgx-starfield-zoom *, .bgx-starfield-zoom::before, .bgx-starfield-zoom::after, .bgx-starfield-zoom *::before, .bgx-starfield-zoom *::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