Iridescent soap bubbles
Iridescent bubbles rise and wobble with a swirling film of color; tap one and it bursts into tiny droplets.
Settings
Code
<div class="pt-uvq16-soap-bubbles"><i style="--x:37.8%;--s:2.82em;--du:14.2;--dl:-0.7;--sp:4.1"><b></b></i><i style="--x:18.1%;--s:6.05em;--du:12.8;--dl:-4.8;--sp:3.9"><b></b></i><i style="--x:47.4%;--s:2.79em;--du:19.9;--dl:-0.9;--sp:3.0"><b></b></i><i style="--x:63.4%;--s:7.76em;--du:14.2;--dl:-8.4;--sp:2.8"><b></b></i><i style="--x:25.1%;--s:2.88em;--du:18.8;--dl:-14.1;--sp:4.1"><b></b></i><i style="--x:66.8%;--s:6.29em;--du:16.2;--dl:-6.4;--sp:2.5"><b></b></i><i style="--x:62.2%;--s:3.42em;--du:13.2;--dl:-5.8;--sp:4.3"><b></b></i><i style="--x:51.3%;--s:4.79em;--du:10.9;--dl:-9.2;--sp:3.4"><b></b></i><i style="--x:68.5%;--s:3.95em;--du:11.3;--dl:-8.9;--sp:3.0"><b></b></i><i style="--x:26.2%;--s:4.39em;--du:19.2;--dl:-8.8;--sp:3.5"><b></b></i><i style="--x:53.5%;--s:5.02em;--du:13.2;--dl:-10.2;--sp:2.7"><b></b></i><i style="--x:89.5%;--s:5.37em;--du:15.6;--dl:-6.6;--sp:4.5"><b></b></i><i style="--x:87.1%;--s:7.80em;--du:12.9;--dl:-0.3;--sp:2.7"><b></b></i><i style="--x:29.2%;--s:7.89em;--du:16.4;--dl:-16.2;--sp:4.2"><b></b></i></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
Soap bubbles made with layered CSS gradients. A rotating conic gradient, masked to a thin rim, imitates the shifting colors of a soap film, a radial highlight adds the window reflection and a soft inner edge gives volume. Each bubble rises at its own pace while it sways and squashes slightly, like a real one caught in a breeze.
The three colors tint the film, so pastel picks feel the most natural. Density makes the bubbles bigger. A tiny script pops a bubble when you click or tap it: it swells, fades and throws a ring of droplets before floating up again from the bottom. Sweet for kids, cleaning and cosmetics.