Planet Horizon Background
The curved limb of a giant planet fills the bottom of a starry sky, its cloud bands drifting as it turns under a glowing atmosphere, while a small moon crosses overhead. Only transforms animate.
Also known as: planet background css, space planet animation css, planet rise background.
HTML
<div class="bgx-planet-horizon" aria-hidden="true"><div class="bgx-planet-horizon-planet"><span></span></div><i></i></div>
CSS
.bgx-planet-horizon {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: radial-gradient(ellipse 120% 80% at 50% 120%, color-mix(in srgb, var(--c) 32%, #0b1030), #03040b 70%);}
.bgx-planet-horizon::before {
content: "";
position: absolute;
inset: 0;
background-size: 11em 11em;
background-image:
radial-gradient(circle 0.07em at 4.3% 24.4%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 28.1% 64.3%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 28.2% 59.8%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 85.8% 69.5%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 83.8% 55%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 66.3% 47.3%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 33.1% 41.8%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 21.7% 18.9%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 90.7% 74.3%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 63.5% 95.7%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 84.7% 54.7%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 44.7% 6.5%, rgb(255 255 255 / 0.6) 50%, transparent);
}
.bgx-planet-horizon::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse 34% 7% at 50% 60%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.6)), transparent);
animation: bgx-planet-horizon-glare 5s ease-in-out infinite alternate;
}
.bgx-planet-horizon-planet {
position: absolute;
top: 60%;
left: 50%;
width: 90em;
height: 90em;
margin-left: -45em;
border-radius: 50%;
overflow: hidden;
background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--c) 50%, #1b2a55), #070a18 26%);
box-shadow:
0 -0.1em 0.3em color-mix(in srgb, var(--c) 30%, #fff),
0 -0.5em 1.6em 0.3em color-mix(in srgb, var(--c) 60%, transparent),
0 -1.5em 5em 1em color-mix(in srgb, var(--c) 28%, transparent);
}
.bgx-planet-horizon-planet span {
position: absolute;
top: 0;
left: 0;
right: -24em;
height: 14em;
background-size: 24em 100%;
background-image:
radial-gradient(9em 5% at 4em 14%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(9em 5% at 28em 14%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(10em 6% at 15em 26%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(10em 6% at -9em 26%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(11em 5% at 9em 40%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(11em 5% at 33em 40%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(8em 6% at 20em 52%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(8em 6% at -4em 52%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(9em 5% at 3em 66%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent),
radial-gradient(9em 5% at 27em 66%, color-mix(in srgb, var(--c) 30%, rgb(255 255 255 / 0.3)), transparent);
mask: linear-gradient(to bottom, #000, transparent);
animation: bgx-planet-horizon-turn 36s linear infinite;
}
.bgx-planet-horizon i {
position: absolute;
top: 16%;
left: 0;
width: 100%;
animation: bgx-planet-horizon-moon 40s linear -14s infinite;
}
.bgx-planet-horizon i::before {
content: "";
position: absolute;
width: 1.3em;
height: 1.3em;
border-radius: 50%;
background: radial-gradient(circle at 72% 80%, #e6e9f2, #9aa2b8 45%, #262a38 80%);
box-shadow: 0 0 0.8em color-mix(in srgb, var(--c) 30%, transparent);
}
@keyframes bgx-planet-horizon-turn {
to { transform: translateX(-24em); }
}
@keyframes bgx-planet-horizon-moon {
from { transform: translateX(-2em); }
to { transform: translateX(100%); }
}
@keyframes bgx-planet-horizon-glare {
from { opacity: 0.6; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-planet-horizon, .bgx-planet-horizon *, .bgx-planet-horizon::before, .bgx-planet-horizon::after, .bgx-planet-horizon *::before, .bgx-planet-horizon *::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.