The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="bubbles">
  <span style="--size: 60px; --left: 8%;  --time: 14s; --delay: 0s;"></span>
  <span style="--size: 24px; --left: 20%; --time: 9s;  --delay: -3s;"></span>
  <span style="--size: 90px; --left: 32%; --time: 18s; --delay: -6s;"></span>
  <span style="--size: 36px; --left: 45%; --time: 11s; --delay: -1s;"></span>
  <span style="--size: 70px; --left: 58%; --time: 16s; --delay: -8s;"></span>
  <span style="--size: 20px; --left: 68%; --time: 8s;  --delay: -4s;"></span>
  <span style="--size: 48px; --left: 78%; --time: 13s; --delay: -10s;"></span>
  <span style="--size: 100px; --left: 88%; --time: 20s; --delay: -5s;"></span>
  <div class="content">
    <h1>Floating Bubbles</h1>
    <p>CSS variables drive every bubble.</p>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same background, then ask it to adapt the colours, text or framework to your project.

Create a floating-bubbles background using only HTML and CSS.

Requirements:
- Full-viewport container with a vertical gradient from navy #002057 to indigo #2506ad, overflow hidden.
- Eight span elements, each configured with inline CSS custom properties: --size (20px to 100px), --left (horizontal position as a percentage), --time (animation duration 8s to 20s) and --delay (a negative delay).
- Style every span as a translucent white circle (rgba(255,255,255,0.12) fill, 1px lighter border) positioned below the bottom edge.
- One keyframe animation "rise" moves a bubble up by 125vh, scales it from 0.8 to 1.2 and fades it in then out. Apply it with animation: rise var(--time) linear infinite and animation-delay: var(--delay).
- Hide the bubbles under prefers-reduced-motion.
- Centre a white heading above the bubbles.

Return a single HTML file with a <style> block.

How to build it, step by step

1. 1

   Create one CSS rule for all bubbles that reads its size, position and timing from CSS custom properties.

2. 2

   Set those custom properties inline on each span. This gives every bubble different behaviour without writing eight separate CSS rules.

3. 3

   Start the bubbles below the container (bottom: -120px) and hide the overflow so they appear to rise into view.

4. 4

   Write one keyframe animation that translates upward and fades the bubble out near the top.

5. 5

   Use negative delays so the screen is already full of bubbles when the page loads.

Customisation tips

• Add more spans for a denser effect; each needs only the four variables.
• Add a slight horizontal sway by animating translateX in a second keyframe animation.
• Swap border-radius: 50% for 20% to turn bubbles into floating rounded squares.

More backgrounds