Gradient Orb Background: CSS Animated Background

Gradient Orb Background

A glossy sphere of swirling color floats in the dark with a halo that shifts hue as it turns, the look of an AI voice assistant. Two conic gradients spin in opposite directions under a glass shine.

Also known as: ai orb css animation, glowing gradient sphere, siri style orb css.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-gradient-orb" aria-hidden="true"><span></span><span></span></div>

CSS

.bgx-gradient-orb {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --swirl: conic-gradient(from 0deg at 35% 40%, var(--c), oklch(from var(--c) 0.66 0.24 calc(h + 70)), oklch(from var(--c) 0.82 0.15 calc(h - 60)), oklch(from var(--c) 0.74 0.2 calc(h + 140)), var(--c));
  background: radial-gradient(ellipse 60% 70% at 50% 50%, oklch(from var(--c) 0.2 0.05 calc(h + 0)), #06060a 70%);
}
.bgx-gradient-orb span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(10em, 22%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
}
.bgx-gradient-orb span::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--swirl);
  animation: bgx-gradient-orb-spin 6s linear infinite var(--dir, normal);
}
.bgx-gradient-orb span:nth-child(1)::before {
  --dir: reverse;
  inset: -30%;
  filter: blur(2.4em);
  opacity: 0.6;
}
.bgx-gradient-orb span:nth-child(2) {
  overflow: hidden;
}
.bgx-gradient-orb span:nth-child(2)::before {
  inset: -25%;
  filter: blur(0.7em);
}
.bgx-gradient-orb span:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.6), transparent 38%),
    radial-gradient(circle, transparent 55%, rgb(0 0 0 / 0.45));
}
@keyframes bgx-gradient-orb-spin {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-gradient-orb, .bgx-gradient-orb *, .bgx-gradient-orb::before, .bgx-gradient-orb::after, .bgx-gradient-orb *::before, .bgx-gradient-orb *::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-[#06060a]" aria-hidden="true">
  <div class="absolute left-1/2 top-1/2 aspect-square w-[max(10rem,22%)] -translate-x-1/2 -translate-y-1/2">
    <div class="absolute -inset-[30%] animate-spin rounded-full bg-[conic-gradient(at_35%_40%,#3b82f6,#d946ef,#22d3ee,#fb923c,#3b82f6)] opacity-60 blur-3xl [animation-direction:reverse] [animation-duration:6s]"></div>
    <div class="relative h-full w-full overflow-hidden rounded-full">
      <div class="absolute -inset-1/4 animate-spin rounded-full bg-[conic-gradient(at_35%_40%,#3b82f6,#d946ef,#22d3ee,#fb923c,#3b82f6)] blur-lg [animation-duration:6s]"></div>
      <div class="absolute inset-0 rounded-full bg-[radial-gradient(circle_at_34%_28%,rgb(255_255_255/0.6),transparent_38%),radial-gradient(circle,transparent_55%,rgb(0_0_0/0.45))]"></div>
    </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.

Gradient Orb Background

HTML

CSS

Tailwind CSS version

Customizing this snippet

Similar animated backgrounds