CreativePower

Floating orbs

subtle

Three drifting blurred orbs — the Socialaize look.

Three colored, heavily-blurred circles drift slowly in opposite directions. The composition feels alive without any cursor or scroll dependency. Used heavily by AI-product brands (Socialaize, Anthropic-adjacent). Pure CSS keyframes.

animatedeffectbackgroundambientcss-only

━━ Use this pattern

━━ Live preview

━━ HTML markup

<section class="fo-stage">
  <div class="fo-orb fo-orb-1"></div>
  <div class="fo-orb fo-orb-2"></div>
  <div class="fo-orb fo-orb-3"></div>
  <div class="fo-content">
    <h2 class="fo-title">Floating orbs.</h2>
  </div>
</section>

━━ CSS

.fo-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  /* Dark ground derived from the page's tokens: --color-on-surface pulled toward
     --color-surface, so the effect keeps a dark stage even on a light page. The
     literal in each var() is the fallback when no tokens are present. */
  --fo-ink: color-mix(in oklab, var(--color-on-surface, #08090b) 92%, var(--color-surface, #08090b));
  /* Each orb mixes toward the surface BEFORE the layer's 0.55 opacity, so a dark or cool
     primary doesn't render dimmer than the literal tuning assumed. */
  --fo-hue-a: color-mix(in oklab, var(--color-primary, #ff6b1a) 80%, var(--color-surface, #ff6b1a));
  --fo-hue-b: color-mix(in oklab, var(--color-secondary, var(--color-primary, #5d8eff)) 80%, var(--color-surface, #5d8eff));
  --fo-hue-c: color-mix(in oklab,
                color-mix(in oklab, var(--color-primary, #d97757) 62%, var(--color-secondary, var(--color-primary, #d97757)))
                80%, var(--color-surface, #d97757));
  background: var(--fo-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
@supports (color: oklch(from red min(l, 1 - l) c h)) {
  .fo-stage {
    --fo-ds-ground: oklch(from color-mix(in oklab, var(--color-on-surface) 92%, var(--color-surface)) min(l, 1 - l) c h);
    --fo-ds-ink: oklch(from var(--color-surface) max(l, 1 - l) c h);
    --fo-ink: var(--fo-ds-ground, color-mix(in oklab, var(--color-on-surface, #08090b) 92%, var(--color-surface, #08090b)));
    --fo-hue-a: color-mix(in oklab, var(--color-primary, #ff6b1a) 80%, var(--fo-ds-ink, #ff6b1a));
    --fo-hue-b: color-mix(in oklab, var(--color-secondary, var(--color-primary, #5d8eff)) 80%, var(--fo-ds-ink, #5d8eff));
    --fo-hue-c: color-mix(in oklab,
                color-mix(in oklab, var(--color-primary, #d97757) 62%, var(--color-secondary, var(--color-primary, #d97757)))
                80%, var(--fo-ds-ink, #d97757));
  }
}
.fo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.fo-orb-1 { width: 380px; height: 380px; background: var(--fo-hue-a); top: 10%; left: 8%; animation: fo-drift-1 14s ease-in-out infinite; }
.fo-orb-2 { width: 300px; height: 300px; background: var(--fo-hue-b); bottom: 12%; right: 10%; animation: fo-drift-2 18s ease-in-out infinite; }
.fo-orb-3 { width: 250px; height: 250px; background: var(--fo-hue-c); top: 55%; left: 50%; transform: translate(-50%, -50%); animation: fo-drift-3 22s ease-in-out infinite; }
@keyframes fo-drift-1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(40px, 60px); } }
@keyframes fo-drift-2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-50px, -40px); } }
@keyframes fo-drift-3 { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(calc(-50% + 30px), calc(-50% - 30px)); } }
@media (prefers-reduced-motion: reduce) {
  .fo-orb { animation: none; }
}
.fo-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 6%;
}
.fo-title {
  font-family: "Geist", system-ui, sans-serif;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  /* stageMode "dark": the headline sits on the dark stage, so it takes SURFACE. */
  color: var(--color-surface, #fafafa);
  line-height: 1;
}
@supports (color: oklch(from red min(l, 1 - l) c h)) {
  .fo-title {
    --fo-ds-ink: oklch(from var(--color-surface) max(l, 1 - l) c h);
    color: var(--fo-ds-ink, #fafafa);
  }
}