Gooey blobs background
Coloured drops orbit, merge and pull apart like liquid. A full‑screen background in pure HTML and CSS.
Settings
Code
<div class="pt-goo"><svg width="0" height="0" style="position:absolute"><filter id="pt-goo-f"><feGaussianBlur in="SourceGraphic" stdDeviation="22"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -13"/></filter></svg><b><i style="--cc:var(--c1);--z:12.0cqmin;--r:21.3cqmin;--t:16.5s;--wx:-7.4cqmin;--wy:-19.1cqmin"></i><i style="--cc:var(--c2);--z:22.3cqmin;--r:34.2cqmin;--t:17.8s;--wx:-7.8cqmin;--wy:18.9cqmin"></i><i style="--cc:var(--c3);--z:18.4cqmin;--r:43.9cqmin;--t:27.8s;--wx:6.5cqmin;--wy:-15.3cqmin"></i><i style="--cc:var(--c1);--z:21.4cqmin;--r:35.6cqmin;--t:22.3s;--wx:0.9cqmin;--wy:-14.1cqmin"></i><i style="--cc:var(--c2);--z:13.8cqmin;--r:40.9cqmin;--t:18.9s;--wx:5.7cqmin;--wy:-13.8cqmin"></i><i style="--cc:var(--c3);--z:18.9cqmin;--r:20.1cqmin;--t:18.9s;--wx:-18.7cqmin;--wy:19.7cqmin"></i><i style="--cc:var(--c1);--z:13.1cqmin;--r:35.9cqmin;--t:16.9s;--wx:6.2cqmin;--wy:7.1cqmin"></i><i style="--cc:var(--c2);--z:15.3cqmin;--r:36.5cqmin;--t:17.4s;--wx:-7.6cqmin;--wy:-14.8cqmin"></i><i style="--cc:var(--c3);--z:12.3cqmin;--r:35.1cqmin;--t:23.0s;--wx:-19.7cqmin;--wy:-13.3cqmin"></i></b></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
Where to use it
A gooey blob background gives a hero section something soft and alive behind the headline: a creative studio, a sweets or drinks brand, a music app, the launch page of a playful product. Nine drops in three colours drift around and melt into each other, and it is all CSS, so it drops into any page without a framework.
The blur that makes the drops merge is heavy work for the browser, so on older phones it can stutter; keep it to one section rather than the whole site. If there is text on top, lower the opacity first, then the speed.