Floating Gradient Orbs Background
Soft iridescent orbs float at different depths over a pale backdrop, their colors slowly swirling inside a frosted rim. Each orb clips a blurred, turning conic gradient, and far ones sit out of focus.
Also known as: gradient orb, orb animation css, css orb, floating orbs background css.
HTML
<div class="bgx-floating-spheres" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span></div>
CSS
.bgx-floating-spheres {
--c: var(--bgx-color, #3b82f6);
font-size: var(--bgx-size, 16px);
position: absolute;
inset: 0;
overflow: hidden;
background: radial-gradient(ellipse 90% 80% at 50% 30%, oklch(from var(--c) 0.99 0.008 calc(h + 0)), oklch(from var(--c) 0.95 0.025 calc(h + 30)));
isolation: isolate;}
.bgx-floating-spheres span {
position: absolute;
left: var(--x);
top: var(--y);
width: var(--s);
aspect-ratio: 1;
translate: -50% -50%;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 calc(var(--s) * 0.3) calc(var(--s) * 0.5) calc(var(--s) * -0.2) oklch(from var(--c) 0.6 0.16 calc(h + var(--h)) / 0.35);
filter: blur(var(--b, 0em));
opacity: var(--o, 1);
animation: bgx-floating-spheres-bob var(--t) cubic-bezier(0.45, 0, 0.55, 1) var(--d) infinite alternate;
}
.bgx-floating-spheres span::before {
content: "";
position: absolute;
inset: -25%;
background: conic-gradient(oklch(from var(--c) 0.8 0.13 calc(h + var(--h))), oklch(from var(--c) 0.7 0.17 calc(h + var(--h) + 50)), oklch(from var(--c) 0.9 0.07 calc(h + var(--h) - 60)), oklch(from var(--c) 0.76 0.15 calc(h + var(--h) + 120)), oklch(from var(--c) 0.8 0.13 calc(h + var(--h))));
filter: blur(calc(var(--s) * 0.12));
animation: bgx-floating-spheres-swirl calc(var(--t) * 2.5) linear infinite;
}
.bgx-floating-spheres span::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 50% 115%, rgb(255 255 255 / 0.55), transparent 55%), radial-gradient(circle at 32% 20%, rgb(255 255 255 / 0.4), transparent 55%);
box-shadow: inset 0 0 calc(var(--s) * 0.12) rgb(255 255 255 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.35);
}
.bgx-floating-spheres span:nth-child(1) { --x: 22%; --y: 46%; --s: 6.2em; --h: 0; --t: 6s; --d: -1s; }
.bgx-floating-spheres span:nth-child(2) { --x: 70%; --y: 34%; --s: 4.6em; --h: 70; --t: 7s; --d: -4s; }
.bgx-floating-spheres span:nth-child(3) { --x: 50%; --y: 74%; --s: 3em; --h: -50; --t: 5s; --d: -2s; }
.bgx-floating-spheres span:nth-child(4) { --x: 88%; --y: 72%; --s: 2.6em; --h: 140; --t: 8s; --d: -6s; --b: 0.15em; --o: 0.8; }
.bgx-floating-spheres span:nth-child(5) { --x: 40%; --y: 18%; --s: 1.8em; --h: 30; --t: 6.5s; --d: -3s; --b: 0.25em; --o: 0.65; }
.bgx-floating-spheres span:nth-child(6) { --x: 8%; --y: 82%; --s: 2em; --h: -110; --t: 7.5s; --d: -5s; --b: 0.2em; --o: 0.7; }
@keyframes bgx-floating-spheres-bob {
from { transform: translateY(-0.6em); }
to { transform: translateY(0.6em); }
}
@keyframes bgx-floating-spheres-swirl {
to { rotate: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-floating-spheres, .bgx-floating-spheres::before, .bgx-floating-spheres::after, .bgx-floating-spheres *, .bgx-floating-spheres *::before, .bgx-floating-spheres *::after { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
.bgx-floating-spheres, .bgx-floating-spheres *, .bgx-floating-spheres::before, .bgx-floating-spheres::after, .bgx-floating-spheres *::before, .bgx-floating-spheres *::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.