Twinkling Stars Background: CSS Animated Background

Twinkling Stars Background

Four-pointed stars flare and fade at their own pace over a still field of faint stars, like a clear night sky. Each sparkle is one clip-path span that scales and turns.

Also known as: night sky background css, twinkling night sky, stars twinkle animation css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-twinkling-stars" aria-hidden="true"><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>

CSS

.bgx-twinkling-stars {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #04060f, #0a1024 60%, color-mix(in srgb, var(--c) 38%, #101634));}
.bgx-twinkling-stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: 10em 10em;
  background-image:
    radial-gradient(circle 0.07em at 4% 93.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 8.3% 32.4%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 25.8% 59.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 49.4% 94.1%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 4.2% 53.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 34% 52.7%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 7.8% 80.6%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 80.7% 10.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 56.5% 41.5%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 33.5% 53.9%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 15.7% 40.7%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 23.9% 32.8%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 81.9% 89.3%, rgb(255 255 255 / 0.5) 50%, transparent),
    radial-gradient(circle 0.07em at 84.4% 64.5%, rgb(255 255 255 / 0.5) 50%, transparent);
}
.bgx-twinkling-stars span {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  background: radial-gradient(closest-side, #fff 0 14%, color-mix(in srgb, var(--c) 45%, #fff) 30%, transparent);
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
  opacity: 0.15;
  animation: bgx-twinkling-stars-twinkle var(--dur) ease-in-out var(--delay) infinite;
}
.bgx-twinkling-stars span:nth-child(1) { --x: 13.8%; --y: 39.4%; --s: 0.91em; --dur: 3.52s; --delay: -4.47s; }
.bgx-twinkling-stars span:nth-child(2) { --x: 43.3%; --y: 71.1%; --s: 1.66em; --dur: 2.74s; --delay: -3.05s; }
.bgx-twinkling-stars span:nth-child(3) { --x: 32.1%; --y: 38.3%; --s: 1.88em; --dur: 3.67s; --delay: -2.47s; }
.bgx-twinkling-stars span:nth-child(4) { --x: 84.2%; --y: 83%; --s: 2.06em; --dur: 2.45s; --delay: -2.95s; }
.bgx-twinkling-stars span:nth-child(5) { --x: 45.8%; --y: 45%; --s: 1.2em; --dur: 2.57s; --delay: -4.68s; }
.bgx-twinkling-stars span:nth-child(6) { --x: 73.4%; --y: 88.1%; --s: 1.84em; --dur: 3.44s; --delay: -2.65s; }
.bgx-twinkling-stars span:nth-child(7) { --x: 54.6%; --y: 60.6%; --s: 1.67em; --dur: 4.21s; --delay: -0.71s; }
.bgx-twinkling-stars span:nth-child(8) { --x: 19.5%; --y: 72.2%; --s: 2.08em; --dur: 2.78s; --delay: -3.39s; }
.bgx-twinkling-stars span:nth-child(9) { --x: 92.7%; --y: 45.7%; --s: 1.77em; --dur: 2.84s; --delay: -3.88s; }
.bgx-twinkling-stars span:nth-child(10) { --x: 63.9%; --y: 45.6%; --s: 1.06em; --dur: 2.72s; --delay: -1.17s; }
.bgx-twinkling-stars span:nth-child(11) { --x: 69.6%; --y: 76%; --s: 1.5em; --dur: 3.7s; --delay: -2.16s; }
.bgx-twinkling-stars span:nth-child(12) { --x: 59.9%; --y: 69.9%; --s: 1.24em; --dur: 3.19s; --delay: -2s; }
.bgx-twinkling-stars span:nth-child(13) { --x: 23.3%; --y: 44.9%; --s: 2.18em; --dur: 3.59s; --delay: -3.24s; }
.bgx-twinkling-stars span:nth-child(14) { --x: 37.9%; --y: 91.6%; --s: 2.15em; --dur: 3.37s; --delay: -4.55s; }
.bgx-twinkling-stars span:nth-child(15) { --x: 79.6%; --y: 89.2%; --s: 1.08em; --dur: 2.94s; --delay: -3.43s; }
.bgx-twinkling-stars span:nth-child(16) { --x: 8%; --y: 32.6%; --s: 0.88em; --dur: 3.85s; --delay: -0.68s; }
.bgx-twinkling-stars span:nth-child(17) { --x: 96.6%; --y: 42.8%; --s: 1.27em; --dur: 4.26s; --delay: -2.71s; }
.bgx-twinkling-stars span:nth-child(18) { --x: 2.9%; --y: 81.5%; --s: 1.33em; --dur: 4.49s; --delay: -4.73s; }
@keyframes bgx-twinkling-stars-twinkle {
  0%, 100% { transform: scale(0.25) rotate(0deg); opacity: 0.15; }
  50%      { transform: scale(1) rotate(45deg); opacity: 1; }
}

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

Twinkling Stars Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds