Floating Bubbles Background

<div class="bgx-floating-bubbles" aria-hidden="true"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>

.bgx-floating-bubbles {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 6%, #fff));}
.bgx-floating-bubbles span {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--d);
  height: 100%;
  animation: bgx-floating-bubbles-rise var(--dur) linear var(--delay) infinite;
}
.bgx-floating-bubbles span::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 9%, transparent 17%),
    radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--c) 28%, transparent) 88%, color-mix(in srgb, var(--c) 55%, transparent));
  box-shadow:
    inset 0.12em -0.08em 0.25em oklch(from var(--c) 0.85 0.12 calc(h + 70) / 0.5),
    inset -0.1em 0.1em 0.25em oklch(from var(--c) 0.85 0.12 calc(h - 70) / 0.45);
  animation: bgx-floating-bubbles-wobble var(--sway) ease-in-out infinite alternate;
}
.bgx-floating-bubbles span:nth-child(1) { --x: 40.8%; --d: 2.12em; --dur: 10.14s; --delay: -3.48s; --sway: 1.48s; }
.bgx-floating-bubbles span:nth-child(2) { --x: 74%; --d: 1.76em; --dur: 7.15s; --delay: -5.54s; --sway: 2.44s; }
.bgx-floating-bubbles span:nth-child(3) { --x: 67%; --d: 2.6em; --dur: 8.22s; --delay: -9.4s; --sway: 2.47s; }
.bgx-floating-bubbles span:nth-child(4) { --x: 12.3%; --d: 2.21em; --dur: 9.67s; --delay: -11.35s; --sway: 1.98s; }
.bgx-floating-bubbles span:nth-child(5) { --x: 54.1%; --d: 1.82em; --dur: 10.12s; --delay: -11.24s; --sway: 1.57s; }
.bgx-floating-bubbles span:nth-child(6) { --x: 47.7%; --d: 3.03em; --dur: 8.69s; --delay: -6.89s; --sway: 1.94s; }
.bgx-floating-bubbles span:nth-child(7) { --x: 18.9%; --d: 2.46em; --dur: 7.52s; --delay: -9.57s; --sway: 2.57s; }
.bgx-floating-bubbles span:nth-child(8) { --x: 34.2%; --d: 2.72em; --dur: 9.71s; --delay: -4.86s; --sway: 1.46s; }
.bgx-floating-bubbles span:nth-child(9) { --x: 87.8%; --d: 3.44em; --dur: 7.72s; --delay: -7.51s; --sway: 2.33s; }
.bgx-floating-bubbles span:nth-child(10) { --x: 81.5%; --d: 2.09em; --dur: 10.73s; --delay: -1.54s; --sway: 2.32s; }
.bgx-floating-bubbles span:nth-child(11) { --x: 59.9%; --d: 1.37em; --dur: 10.31s; --delay: -11.93s; --sway: 2.13s; }
.bgx-floating-bubbles span:nth-child(12) { --x: 97.6%; --d: 1.65em; --dur: 9.99s; --delay: -4.75s; --sway: 2.02s; }
.bgx-floating-bubbles span:nth-child(13) { --x: 22.6%; --d: 2.65em; --dur: 9.79s; --delay: -9.55s; --sway: 2.55s; }
.bgx-floating-bubbles span:nth-child(14) { --x: 5.3%; --d: 1.15em; --dur: 7.33s; --delay: -5.11s; --sway: 1.65s; }
@keyframes bgx-floating-bubbles-rise {
  from { transform: translateY(var(--d)); }
  to   { transform: translateY(-100%); }
}
@keyframes bgx-floating-bubbles-wobble {
  from { transform: translateX(-0.5em) scale(1, 0.94); }
  to   { transform: translateX(0.5em) scale(0.94, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-floating-bubbles, .bgx-floating-bubbles *, .bgx-floating-bubbles::before, .bgx-floating-bubbles::after, .bgx-floating-bubbles *::before, .bgx-floating-bubbles *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Similar animated backgrounds