Blurred Orbs Background: CSS Animated Background

Blurred Orbs Background

Three soft glowing orbs circle slowly over a near-black base and brighten where they cross. Each orb rides a rotating wrapper, so only transform animates, and the glow is a radial gradient.

Also known as: animated blur background css, floating orbs background, glowing orbs css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-blurred-orbs" aria-hidden="true"><span></span><span></span><span></span></div>

CSS

.bgx-blurred-orbs {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #07080f;
  isolation: isolate;
}
.bgx-blurred-orbs span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  mix-blend-mode: screen;
  animation: bgx-blurred-orbs-orbit var(--t) linear var(--d) infinite var(--dir, normal);
}
.bgx-blurred-orbs span::before {
  content: "";
  position: absolute;
  left: var(--r);
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--o) 15%, transparent);
}
.bgx-blurred-orbs span:nth-child(1) { --x: 28%; --y: 42%; --r: 4em; --size: 20em; --t: 16s; --d: -3s; --o: oklch(from var(--c) 0.62 0.2 calc(h + 0) / 0.9); }
.bgx-blurred-orbs span:nth-child(2) { --x: 70%; --y: 55%; --r: 5em; --size: 18em; --t: 21s; --d: -11s; --dir: reverse; --o: oklch(from var(--c) 0.62 0.24 calc(h + 70) / 0.8); }
.bgx-blurred-orbs span:nth-child(3) { --x: 52%; --y: 20%; --r: 3.5em; --size: 15em; --t: 13s; --d: -6s; --o: oklch(from var(--c) 0.78 0.14 calc(h - 60) / 0.7); }
@keyframes bgx-blurred-orbs-orbit {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-blurred-orbs, .bgx-blurred-orbs *, .bgx-blurred-orbs::before, .bgx-blurred-orbs::after, .bgx-blurred-orbs *::before, .bgx-blurred-orbs *::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 isolate overflow-hidden bg-[#07080f]" aria-hidden="true">
  <div class="absolute left-[28%] top-[42%] animate-spin mix-blend-screen [animation-duration:16s]">
    <div class="absolute left-12 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/80 blur-3xl"></div>
  </div>
  <div class="absolute left-[70%] top-[55%] animate-spin mix-blend-screen [animation-direction:reverse] [animation-duration:21s]">
    <div class="absolute left-16 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full bg-fuchsia-500/70 blur-3xl"></div>
  </div>
  <div class="absolute left-[52%] top-[20%] animate-spin mix-blend-screen [animation-duration:13s]">
    <div class="absolute left-10 h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-cyan-400/60 blur-3xl"></div>
  </div>
</div>

Customizing this snippet

Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. 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.

Blurred Orbs Background

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar animated backgrounds