Shooting Stars Background
Meteors streak diagonally across a dark, dusty sky every few seconds, each with a glowing head and a fading tail. The streaks move on transform only, staggered with negative delays.
Also known as: meteor shower background css, meteors background, shooting star animation css.
HTML
<div class="bgx-shooting-stars" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-shooting-stars {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(160deg, #03050d 30%, color-mix(in srgb, var(--c) 30%, #0b1024));}
.bgx-shooting-stars::before {
content: "";
position: absolute;
inset: 0;
background-size: 12em 12em;
background-image:
radial-gradient(circle 0.08em at 4% 40.2%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 94.1% 78%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 81.6% 93.9%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 89.5% 80.7%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 82.3% 33.7%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 70.6% 31.2%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 10.4% 42.4%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 21.7% 70%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 51.6% 33%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 70.2% 72.1%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 14.8% 18.5%, rgb(255 255 255 / 0.55) 50%, transparent),
radial-gradient(circle 0.08em at 17.6% 17.6%, rgb(255 255 255 / 0.55) 50%, transparent);
}
.bgx-shooting-stars span {
position: absolute;
top: var(--y);
left: var(--x);
width: var(--len);
height: 0.1em;
border-radius: 999em;
background: linear-gradient(to right, transparent, color-mix(in srgb, var(--c) 70%, transparent) 65%, #fff);
rotate: 152deg;
opacity: 0;
animation: bgx-shooting-stars-fly var(--dur) linear var(--delay) infinite;
}
.bgx-shooting-stars span::after {
content: "";
position: absolute;
top: 50%;
right: -0.1em;
width: 0.26em;
height: 0.26em;
margin-top: -0.13em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0.5em 0.12em color-mix(in srgb, var(--c) 80%, #fff);
}
.bgx-shooting-stars span:nth-child(1) { --x: 62%; --y: 4%; --len: 8em; --dur: 5.2s; --delay: -0.6s; }
.bgx-shooting-stars span:nth-child(2) { --x: 88%; --y: 22%; --len: 6em; --dur: 6.4s; --delay: -1.2s; }
.bgx-shooting-stars span:nth-child(3) { --x: 34%; --y: -6%; --len: 7em; --dur: 5.8s; --delay: -3.4s; }
.bgx-shooting-stars span:nth-child(4) { --x: 104%; --y: 2%; --len: 9em; --dur: 7.1s; --delay: -4.6s; }
.bgx-shooting-stars span:nth-child(5) { --x: 76%; --y: 38%; --len: 5em; --dur: 6s; --delay: -2.5s; }
.bgx-shooting-stars span:nth-child(6) { --x: 50%; --y: 16%; --len: 6.5em; --dur: 7.6s; --delay: -6.2s; }
@keyframes bgx-shooting-stars-fly {
0% { transform: translateX(0); opacity: 0; }
4% { opacity: 1; }
28% { opacity: 1; }
40% { transform: translateX(30em); opacity: 0; }
100% { transform: translateX(30em); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-shooting-stars, .bgx-shooting-stars *, .bgx-shooting-stars::before, .bgx-shooting-stars::after, .bgx-shooting-stars *::before, .bgx-shooting-stars *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--bgx-coloron the element or a parent. Currently previewing#3b82f6. - Pattern scale: set
--bgx-size. Every other dimension is inem, so the whole thing scales together. Currently previewing16px. - Speed: change the duration on the
transitionoranimationshorthand. 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.