AI CSS Animations

Star Trails Background

Arcs of starlight circle the pole star over dark hills, like a long exposure photo of the night sky, and the whole sky keeps turning. Each trail is one bordered circle showing a quarter or half arc.

Also known as: long exposure star trails css, rotating night sky css, circular star trails.

HTML

<div class="bgx-star-trails" aria-hidden="true"><div class="bgx-star-trails-sky"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></div>

CSS

.bgx-star-trails {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 22% at 20% 104%, #020308 96%, transparent),
    radial-gradient(ellipse 60% 18% at 88% 104%, #03040a 96%, transparent),
    linear-gradient(to bottom, #03040b, #0a0f22 55%, color-mix(in srgb, var(--c) 34%, #151c3c));}
.bgx-star-trails-sky {
  position: absolute;
  top: 24%;
  left: 55%;
  animation: bgx-star-trails-turn 100s linear infinite;
}
.bgx-star-trails-sky::before {
  content: "";
  position: absolute;
  width: 0.24em;
  height: 0.24em;
  margin: -0.12em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0.5em 0.1em color-mix(in srgb, var(--c) 50%, #fff);
}
.bgx-star-trails-sky span {
  position: absolute;
  width: var(--d);
  height: var(--d);
  margin: calc(var(--d) / -2);
  border: var(--w) solid transparent;
  border-top-color: var(--k);
  border-radius: 50%;
  rotate: var(--a);
}
.bgx-star-trails-sky span:nth-child(3n) { border-right-color: var(--k); }
.bgx-star-trails-sky span:nth-child(1) { --d: 2em; --w: 0.09em; --a: 195deg; --k: color-mix(in srgb, var(--c) 59%, transparent); }
.bgx-star-trails-sky span:nth-child(2) { --d: 4.91em; --w: 0.11em; --a: 357deg; --k: rgb(255 255 255 / 0.55); }
.bgx-star-trails-sky span:nth-child(3) { --d: 6.21em; --w: 0.1em; --a: 6deg; --k: color-mix(in srgb, var(--c) 41%, transparent); }
.bgx-star-trails-sky span:nth-child(4) { --d: 8.49em; --w: 0.06em; --a: 189deg; --k: color-mix(in srgb, var(--c) 58%, transparent); }
.bgx-star-trails-sky span:nth-child(5) { --d: 10.67em; --w: 0.09em; --a: 57deg; --k: rgb(255 255 255 / 0.42); }
.bgx-star-trails-sky span:nth-child(6) { --d: 12.49em; --w: 0.06em; --a: 108deg; --k: rgb(255 255 255 / 0.37); }
.bgx-star-trails-sky span:nth-child(7) { --d: 14.69em; --w: 0.12em; --a: 21deg; --k: rgb(255 255 255 / 0.4); }
.bgx-star-trails-sky span:nth-child(8) { --d: 16.46em; --w: 0.12em; --a: 43deg; --k: color-mix(in srgb, var(--c) 67%, transparent); }
.bgx-star-trails-sky span:nth-child(9) { --d: 17.98em; --w: 0.11em; --a: 202deg; --k: color-mix(in srgb, var(--c) 56%, transparent); }
.bgx-star-trails-sky span:nth-child(10) { --d: 20.23em; --w: 0.11em; --a: 25deg; --k: rgb(255 255 255 / 0.27); }
.bgx-star-trails-sky span:nth-child(11) { --d: 21.97em; --w: 0.1em; --a: 26deg; --k: rgb(255 255 255 / 0.26); }
.bgx-star-trails-sky span:nth-child(12) { --d: 23.7em; --w: 0.08em; --a: 148deg; --k: rgb(255 255 255 / 0.43); }
.bgx-star-trails-sky span:nth-child(13) { --d: 26.56em; --w: 0.09em; --a: 179deg; --k: color-mix(in srgb, var(--c) 70%, transparent); }
.bgx-star-trails-sky span:nth-child(14) { --d: 28.04em; --w: 0.08em; --a: 307deg; --k: rgb(255 255 255 / 0.46); }
.bgx-star-trails-sky span:nth-child(15) { --d: 30.33em; --w: 0.12em; --a: 189deg; --k: rgb(255 255 255 / 0.37); }
.bgx-star-trails-sky span:nth-child(16) { --d: 32.02em; --w: 0.09em; --a: 201deg; --k: color-mix(in srgb, var(--c) 66%, transparent); }
.bgx-star-trails-sky span:nth-child(17) { --d: 34.53em; --w: 0.05em; --a: 216deg; --k: color-mix(in srgb, var(--c) 50%, transparent); }
.bgx-star-trails-sky span:nth-child(18) { --d: 35.51em; --w: 0.11em; --a: 162deg; --k: color-mix(in srgb, var(--c) 54%, transparent); }
.bgx-star-trails-sky span:nth-child(19) { --d: 37.98em; --w: 0.12em; --a: 74deg; --k: color-mix(in srgb, var(--c) 49%, transparent); }
.bgx-star-trails-sky span:nth-child(20) { --d: 39.35em; --w: 0.1em; --a: 356deg; --k: rgb(255 255 255 / 0.47); }
.bgx-star-trails-sky span:nth-child(21) { --d: 41.29em; --w: 0.06em; --a: 289deg; --k: rgb(255 255 255 / 0.56); }
.bgx-star-trails-sky span:nth-child(22) { --d: 43.94em; --w: 0.06em; --a: 356deg; --k: rgb(255 255 255 / 0.26); }
.bgx-star-trails-sky span:nth-child(23) { --d: 46.27em; --w: 0.06em; --a: 207deg; --k: color-mix(in srgb, var(--c) 67%, transparent); }
.bgx-star-trails-sky span:nth-child(24) { --d: 48em; --w: 0.11em; --a: 343deg; --k: rgb(255 255 255 / 0.51); }
.bgx-star-trails-sky span:nth-child(25) { --d: 49.84em; --w: 0.09em; --a: 21deg; --k: rgb(255 255 255 / 0.2); }
.bgx-star-trails-sky span:nth-child(26) { --d: 51.25em; --w: 0.12em; --a: 4deg; --k: color-mix(in srgb, var(--c) 65%, transparent); }
.bgx-star-trails-sky span:nth-child(27) { --d: 54.06em; --w: 0.09em; --a: 7deg; --k: rgb(255 255 255 / 0.5); }
.bgx-star-trails-sky span:nth-child(28) { --d: 55.72em; --w: 0.11em; --a: 345deg; --k: rgb(255 255 255 / 0.52); }
.bgx-star-trails-sky span:nth-child(29) { --d: 57.92em; --w: 0.11em; --a: 135deg; --k: rgb(255 255 255 / 0.39); }
.bgx-star-trails-sky span:nth-child(30) { --d: 59.75em; --w: 0.12em; --a: 227deg; --k: rgb(255 255 255 / 0.37); }
.bgx-star-trails-sky span:nth-child(31) { --d: 61.25em; --w: 0.07em; --a: 211deg; --k: rgb(255 255 255 / 0.41); }
.bgx-star-trails-sky span:nth-child(32) { --d: 62.84em; --w: 0.08em; --a: 229deg; --k: rgb(255 255 255 / 0.41); }
.bgx-star-trails-sky span:nth-child(33) { --d: 65.35em; --w: 0.08em; --a: 202deg; --k: rgb(255 255 255 / 0.29); }
.bgx-star-trails-sky span:nth-child(34) { --d: 67.72em; --w: 0.07em; --a: 99deg; --k: rgb(255 255 255 / 0.59); }
.bgx-star-trails-sky span:nth-child(35) { --d: 68.89em; --w: 0.1em; --a: 341deg; --k: rgb(255 255 255 / 0.23); }
.bgx-star-trails-sky span:nth-child(36) { --d: 70.74em; --w: 0.11em; --a: 158deg; --k: color-mix(in srgb, var(--c) 56%, transparent); }
.bgx-star-trails-sky span:nth-child(37) { --d: 73.51em; --w: 0.12em; --a: 218deg; --k: rgb(255 255 255 / 0.48); }
.bgx-star-trails-sky span:nth-child(38) { --d: 75.17em; --w: 0.07em; --a: 40deg; --k: color-mix(in srgb, var(--c) 49%, transparent); }
.bgx-star-trails-sky span:nth-child(39) { --d: 77.46em; --w: 0.09em; --a: 259deg; --k: rgb(255 255 255 / 0.35); }
.bgx-star-trails-sky span:nth-child(40) { --d: 79.37em; --w: 0.05em; --a: 332deg; --k: rgb(255 255 255 / 0.3); }
.bgx-star-trails-sky span:nth-child(41) { --d: 80.62em; --w: 0.09em; --a: 316deg; --k: rgb(255 255 255 / 0.5); }
.bgx-star-trails-sky span:nth-child(42) { --d: 82.96em; --w: 0.11em; --a: 190deg; --k: color-mix(in srgb, var(--c) 51%, transparent); }
.bgx-star-trails-sky span:nth-child(43) { --d: 84.74em; --w: 0.11em; --a: 339deg; --k: rgb(255 255 255 / 0.33); }
.bgx-star-trails-sky span:nth-child(44) { --d: 86.49em; --w: 0.12em; --a: 156deg; --k: rgb(255 255 255 / 0.25); }
@keyframes bgx-star-trails-turn {
  to { transform: rotate(360deg); }
}

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