OneTaskBy Tim King · Updated
Bubble Background
See-Through Bubbles With Adjustable Count, Size, Speed and Colour, Plus Reduced Motion
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Bubble Background works
A bubble background sends soft, see-through bubbles wobbling up behind a section, for drinks, aquariums, cleaning products or anything light and fresh. Choose how many bubbles, how big, how fast and what colour, then copy the code.
Rising bubbles add gentle movement without pulling attention from the text. Each bubble has a faint fill, a thin outline and a small highlight, which is enough to read as a bubble.
How the bubble background works
Every bubble has a position, a radius and a wobble phase. Each frame it rises and sways on a sine wave, with small bubbles rising a little faster than big ones. When a bubble floats off the top it starts again below the bottom edge at a new spot, so the stream never stops. Positions are stored as fractions of the section, so the bubbles stay spread out when it resizes.
Accessibility
The canvas is aria-hidden. When a visitor has reduced motion turned on, the bubbles are drawn
once and stay still, and the animation loop stops if the section leaves the page.
FAQ
Can I pop the bubbles on click?
Yes. Listen for click on the section, find the bubble whose centre is within its radius of the
pointer, and move it back below the bottom edge. Add a quick ring that grows and fades for a pop.
How do I make an underwater scene?
Use a deep blue or teal background with a lighter bubble colour, and add a vertical gradient on the section so it gets darker towards the bottom. Slow the rise speed to feel like deeper water.
Can I use bubbles over a photo?
Yes. Set a background-image on the section instead of a flat colour. The canvas is transparent
apart from the bubbles, so the photo shows through behind them.
Why do the bubbles have a small white dot?
The dot is a highlight, a reflection of light on the surface of the bubble. Without it a faint circle reads as a ring or a dot rather than a round, shiny bubble.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Snow Effect
Add gently falling, drifting snow behind a section.
Particle Background
Build a drifting network of connected dots, no library.
Starfield Background
Make stars stream past as if flying through space.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Gradient Maker
Linear, radial and conic CSS gradients with live preview.