Twilight Shooting Stars Background
A twilight sky fades from deep navy to a warm glow over a dark hill while stars twinkle and the odd shooting star streaks past. Each meteor is a gradient line with a glowing head, mostly at rest.
Also known as: shooting star animation css, css stars background, night sky shooting stars, meteor background css.
HTML
<div class="bgx-twilight-meteors" aria-hidden="true"> <span class="bgx-twilight-meteors-stars"></span> <span class="bgx-twilight-meteors-meteor"></span> <span class="bgx-twilight-meteors-meteor"></span> <span class="bgx-twilight-meteors-meteor"></span> <span class="bgx-twilight-meteors-hill"></span> </div>
CSS
.bgx-twilight-meteors {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: linear-gradient(#04060f, #0b1030 38%, oklch(from var(--c) 0.3 0.1 calc(h + 25)) 62%, color-mix(in oklab, var(--c) 25%, #f472b6) 86%, color-mix(in oklab, var(--c) 10%, #fdba74));
isolation: isolate;}
.bgx-twilight-meteors-stars,
.bgx-twilight-meteors-stars::before {
position: absolute;
inset: 0 0 25%;
background-image:
radial-gradient(circle 0.05em at 42.2% 83.7%, #fff 40%, transparent),
radial-gradient(circle 0.06em at 51.7% 49.7%, #fff 40%, transparent),
radial-gradient(circle 0.08em at 60.1% 89.9%, #fff 40%, transparent),
radial-gradient(circle 0.06em at 13.1% 71.8%, #fff 40%, transparent),
radial-gradient(circle 0.06em at 35.1% 20.6%, #fff 40%, transparent),
radial-gradient(circle 0.07em at 92.5% 63.4%, #fff 40%, transparent),
radial-gradient(circle 0.05em at 96.6% 4.6%, #fff 40%, transparent),
radial-gradient(circle 0.07em at 70.7% 3.9%, #fff 40%, transparent),
radial-gradient(circle 0.06em at 25.4% 41.6%, #fff 40%, transparent),
radial-gradient(circle 0.07em at 90.2% 94.4%, #fff 40%, transparent),
radial-gradient(circle 0.07em at 68% 38.5%, #fff 40%, transparent),
radial-gradient(circle 0.1em at 54.5% 59%, #fff 40%, transparent);
background-size: 13em 9em;
-webkit-mask: linear-gradient(#000 40%, transparent);
mask: linear-gradient(#000 40%, transparent);
animation: bgx-twilight-meteors-twinkle 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.bgx-twilight-meteors-stars::before {
content: "";
inset: 0;
background-image:
radial-gradient(circle 0.04em at 71.4% 55.1%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.04em at 57.7% 63.9%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.05em at 77% 17.8%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.04em at 65.2% 16.1%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.05em at 62.1% 79.8%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.08em at 19.5% 59.2%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.06em at 29.7% 76.8%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.06em at 73.8% 39.1%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.05em at 57.3% 79.5%, rgb(255 255 255 / 0.8) 40%, transparent),
radial-gradient(circle 0.06em at 51.1% 89.5%, rgb(255 255 255 / 0.8) 40%, transparent);
background-size: 11em 8em;
animation-delay: -3.2s;
}
.bgx-twilight-meteors-meteor {
position: absolute;
left: var(--x);
top: var(--y);
width: 8em;
height: 0.08em;
rotate: 24deg;
transform-origin: 100% 50%;
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.25) 55%, #fff);
border-radius: 1em;
opacity: 0;
animation: bgx-twilight-meteors-fall var(--t) cubic-bezier(0.3, 0, 0.6, 1) var(--d) infinite;
}
.bgx-twilight-meteors-meteor::after {
content: "";
position: absolute;
right: -0.12em;
top: 50%;
width: 0.24em;
height: 0.24em;
margin-top: -0.12em;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0.4em 0.1em oklch(from var(--c) 0.85 0.08 calc(h + 0) / 0.9);
}
.bgx-twilight-meteors-meteor:nth-of-type(2) { --x: 4%; --y: 4%; --t: 4.6s; --d: -0.5s; }
.bgx-twilight-meteors-meteor:nth-of-type(3) { --x: 36%; --y: -6%; --t: 6.2s; --d: -3.6s; }
.bgx-twilight-meteors-meteor:nth-of-type(4) { --x: 60%; --y: 10%; --t: 7.4s; --d: -2.3s; }
.bgx-twilight-meteors-hill {
position: absolute;
left: -20%;
right: -20%;
top: 80%;
height: 120%;
border-radius: 50% 50% 0 0 / 22% 22% 0 0;
background: linear-gradient(#0a0c1c, #04050c 30%);
box-shadow: 0 -0.06em 0 rgb(253 186 116 / 0.55), 0 -1em 3em rgb(251 146 60 / 0.3);
}
@keyframes bgx-twilight-meteors-twinkle {
from { opacity: 0.35; }
to { opacity: 1; }
}
@keyframes bgx-twilight-meteors-fall {
0% { transform: translateX(0) scaleX(0.3); opacity: 0; }
3% { opacity: 1; }
18% { transform: translateX(14em) scaleX(1); opacity: 0; }
100% { transform: translateX(14em) scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-twilight-meteors, .bgx-twilight-meteors::before, .bgx-twilight-meteors::after, .bgx-twilight-meteors *, .bgx-twilight-meteors *::before, .bgx-twilight-meteors *::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-twilight-meteors, .bgx-twilight-meteors *, .bgx-twilight-meteors::before, .bgx-twilight-meteors::after, .bgx-twilight-meteors *::before, .bgx-twilight-meteors *::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.