Nebula Background
Clouds of glowing gas in two hues swirl slowly behind dark dust lanes and a field of stars, with a few bright stars flaring. Two cloud layers turn in opposite directions and blend with screen.
Also known as: space nebula background css, animated nebula css, cosmic clouds background.
HTML
<div class="bgx-nebula" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-nebula {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
--gas: oklch(from var(--c) 0.62 0.2 calc(h + 70));
background:
radial-gradient(circle 0.07em at 4.3% 43.8%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 71% 87.1%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 10.1% 30.9%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 59.8% 62.8%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 76.8% 91.1%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 38.6% 36.6%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 34.4% 22.8%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 84.2% 94.5%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 88.2% 70%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 35.8% 58.8%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 38.3% 43.6%, rgb(255 255 255 / 0.6) 50%, transparent),
radial-gradient(circle 0.07em at 87.6% 44.9%, rgb(255 255 255 / 0.6) 50%, transparent),
#03030a;
background-size: 10em 10em, auto;}
.bgx-nebula::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 34% 7% at 42% 56%, rgb(3 3 10 / 0.75), transparent),
radial-gradient(ellipse 18% 5% at 63% 44%, rgb(3 3 10 / 0.6), transparent),
radial-gradient(ellipse 22% 6% at 30% 38%, rgb(3 3 10 / 0.5), transparent);
rotate: -14deg;
}
.bgx-nebula span:nth-child(-n + 2) {
position: absolute;
top: 50%;
left: 50%;
width: 44em;
height: 44em;
margin: -22em;
mix-blend-mode: screen;
animation: bgx-nebula-swirl var(--dur) linear infinite var(--dir);
}
.bgx-nebula span:nth-child(1) {
--dur: 80s;
--dir: normal;
background:
radial-gradient(ellipse 26% 12% at 40% 47%, color-mix(in srgb, var(--c) 75%, transparent), transparent),
radial-gradient(ellipse 16% 22% at 57% 42%, color-mix(in srgb, var(--c) 50%, transparent), transparent),
radial-gradient(ellipse 30% 9% at 52% 60%, color-mix(in srgb, var(--c) 45%, transparent), transparent),
radial-gradient(ellipse 9% 7% at 47% 50%, color-mix(in srgb, var(--c) 35%, #fff), transparent);
}
.bgx-nebula span:nth-child(2) {
--dur: 64s;
--dir: reverse;
background:
radial-gradient(ellipse 22% 10% at 58% 54%, color-mix(in srgb, var(--gas) 70%, transparent), transparent),
radial-gradient(ellipse 14% 20% at 40% 58%, color-mix(in srgb, var(--gas) 50%, transparent), transparent),
radial-gradient(ellipse 28% 8% at 46% 40%, color-mix(in srgb, var(--gas) 45%, transparent), transparent);
}
.bgx-nebula span:nth-child(n + 3) {
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 12%, color-mix(in srgb, var(--c) 40%, #fff) 26%, transparent);
clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
animation: bgx-nebula-flare var(--t) ease-in-out var(--delay) infinite alternate;
}
.bgx-nebula span:nth-child(3) { --x: 22%; --y: 28%; --s: 1.8em; --t: 2.6s; --delay: -0.4s; }
.bgx-nebula span:nth-child(4) { --x: 71%; --y: 22%; --s: 1.4em; --t: 3.1s; --delay: -1.9s; }
.bgx-nebula span:nth-child(5) { --x: 58%; --y: 74%; --s: 2.2em; --t: 3.6s; --delay: -1.1s; }
.bgx-nebula span:nth-child(6) { --x: 88%; --y: 62%; --s: 1.2em; --t: 2.3s; --delay: -2.2s; }
@keyframes bgx-nebula-swirl {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.15); }
100% { transform: rotate(360deg) scale(1); }
}
@keyframes bgx-nebula-flare {
from { transform: scale(0.55); opacity: 0.5; }
to { transform: scale(1) rotate(12deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-nebula, .bgx-nebula *, .bgx-nebula::before, .bgx-nebula::after, .bgx-nebula *::before, .bgx-nebula *::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.