Orbiting Planets Background
Five planets circle a glowing sun on faint orbit lines, inner ones fast and outer ones slow, with the lit side always facing the sun. Each orbit ring just rotates, carrying its planet.
Also known as: solar system css animation, planets orbit background css, css solar system.
HTML
<div class="bgx-orbiting-planets" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-orbiting-planets {
--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) 26%, #0b1030), #04050c 70%);}
.bgx-orbiting-planets::before {
content: "";
position: absolute;
inset: 0;
background-size: 10em 10em;
background-image:
radial-gradient(circle 0.07em at 4.2% 39.2%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 93.3% 78.1%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 55.5% 24.3%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 44.7% 41.9%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 54% 91.5%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 71.6% 46.4%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 13.8% 60.5%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 42% 60.9%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 7.9% 37.4%, rgb(255 255 255 / 0.5) 50%, transparent),
radial-gradient(circle 0.07em at 69.2% 51.9%, rgb(255 255 255 / 0.5) 50%, transparent);
}
.bgx-orbiting-planets::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2.6em;
height: 2.6em;
margin: -1.3em;
border-radius: 50%;
background: radial-gradient(closest-side, #fff, #ffd98a 40%, #ff9d3b 75%, transparent);
box-shadow: 0 0 2em 0.6em rgb(255 170 60 / 0.35);
}
.bgx-orbiting-planets span {
position: absolute;
top: 50%;
left: 50%;
width: var(--d);
height: var(--d);
margin: calc(var(--d) / -2);
border: 0.06em solid color-mix(in srgb, var(--c) 28%, transparent);
border-radius: 50%;
animation: bgx-orbiting-planets-spin var(--dur) linear var(--delay) infinite;
}
.bgx-orbiting-planets span::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: var(--p);
height: var(--p);
margin: calc(var(--p) / -2);
border-radius: 50%;
background: radial-gradient(circle at 50% 95%, color-mix(in srgb, var(--k), #fff 55%), var(--k) 50%, color-mix(in srgb, var(--k), #000 55%));
}
.bgx-orbiting-planets span:nth-child(1) { --d: 5em; --p: 0.4em; --k: #b8bcc8; --dur: 5s; --delay: -1.2s; }
.bgx-orbiting-planets span:nth-child(2) { --d: 8em; --p: 0.62em; --k: #f2c46d; --dur: 9s; --delay: -5s; }
.bgx-orbiting-planets span:nth-child(3) { --d: 11.5em; --p: 0.7em; --k: var(--c); --dur: 14s; --delay: -11s; }
.bgx-orbiting-planets span:nth-child(4) { --d: 16em; --p: 0.5em; --k: #e2674a; --dur: 20s; --delay: -6s; }
.bgx-orbiting-planets span:nth-child(5) { --d: 23em; --p: 1.1em; --k: #e8cf9a; --dur: 34s; --delay: -24s; }
.bgx-orbiting-planets span:nth-child(5)::after {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 2.4em;
height: 0.7em;
border: 0.1em solid color-mix(in srgb, var(--k) 75%, #fff);
border-radius: 50%;
translate: -50% -50%;
rotate: -22deg;
}
@keyframes bgx-orbiting-planets-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.bgx-orbiting-planets, .bgx-orbiting-planets *, .bgx-orbiting-planets::before, .bgx-orbiting-planets::after, .bgx-orbiting-planets *::before, .bgx-orbiting-planets *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Tailwind CSS version
The same effect using Tailwind utility classes. No custom CSS or config needed.
<div class="absolute inset-0 overflow-hidden bg-[radial-gradient(circle_at_50%_50%,#17224d,#04050c_70%)] text-[16px]" aria-hidden="true">
<div class="absolute left-1/2 top-1/2 -ml-[1.3em] -mt-[1.3em] h-[2.6em] w-[2.6em] rounded-full bg-[radial-gradient(closest-side,#fff,#ffd98a_40%,#ff9d3b_75%,transparent)] shadow-[0_0_2em_0.6em_rgba(255,170,60,0.35)]"></div>
<div class="absolute left-1/2 top-1/2 -ml-[2.5em] -mt-[2.5em] h-[5em] w-[5em] animate-[spin_5s_linear_infinite] rounded-full border border-blue-500/25 [animation-delay:-1.2s]">
<span class="absolute left-1/2 top-0 -ml-[0.2em] -mt-[0.2em] h-[0.4em] w-[0.4em] rounded-full bg-[radial-gradient(circle_at_50%_95%,#fff,#b8bcc8_50%,#4c4f59)]"></span>
</div>
<div class="absolute left-1/2 top-1/2 -ml-[4em] -mt-[4em] h-[8em] w-[8em] animate-[spin_9s_linear_infinite] rounded-full border border-blue-500/25 [animation-delay:-5s]">
<span class="absolute left-1/2 top-0 -ml-[0.31em] -mt-[0.31em] h-[0.62em] w-[0.62em] rounded-full bg-[radial-gradient(circle_at_50%_95%,#fff,#f2c46d_50%,#6e5320)]"></span>
</div>
<div class="absolute left-1/2 top-1/2 -ml-[5.75em] -mt-[5.75em] h-[11.5em] w-[11.5em] animate-[spin_14s_linear_infinite] rounded-full border border-blue-500/25 [animation-delay:-11s]">
<span class="absolute left-1/2 top-0 -ml-[0.35em] -mt-[0.35em] h-[0.7em] w-[0.7em] rounded-full bg-[radial-gradient(circle_at_50%_95%,#c4dafc,#3b82f6_50%,#1b3a6e)]"></span>
</div>
<div class="absolute left-1/2 top-1/2 -ml-[8em] -mt-[8em] h-[16em] w-[16em] animate-[spin_20s_linear_infinite] rounded-full border border-blue-500/25 [animation-delay:-6s]">
<span class="absolute left-1/2 top-0 -ml-[0.25em] -mt-[0.25em] h-[0.5em] w-[0.5em] rounded-full bg-[radial-gradient(circle_at_50%_95%,#fff,#e2674a_50%,#5e2418)]"></span>
</div>
<div class="absolute left-1/2 top-1/2 -ml-[11.5em] -mt-[11.5em] h-[23em] w-[23em] animate-[spin_34s_linear_infinite] rounded-full border border-blue-500/25 [animation-delay:-24s]">
<span class="absolute left-1/2 top-0 -ml-[0.55em] -mt-[0.55em] h-[1.1em] w-[1.1em] rounded-full bg-[radial-gradient(circle_at_50%_95%,#fff,#e8cf9a_50%,#6b5a36)]"></span>
<span class="absolute left-1/2 top-0 h-[0.7em] w-[2.4em] -translate-x-1/2 -translate-y-1/2 -rotate-[22deg] rounded-full border-[0.1em] border-[#f3e4c4]"></span>
</div>
</div>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.