OneTaskBy Tim King · Updated
Gooey Effect
Blobs That Stretch and Merge Like Liquid, Using an SVG Filter and CSS Animation
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 Gooey Effect works
This gooey effect generator makes blobs that pull away from a central drop and stretch back into it like liquid, the classic metaball look. Choose the number of blobs, their colour, how sticky they are and the speed, then copy the HTML and CSS.
Gooey motion works well for loaders, playful logos and menus that spill out of a button.
How the gooey effect works
The blobs are plain circles moving with a CSS animation. Their container uses an SVG filter: it blurs
everything, then an feColorMatrix boosts the alpha channel sharply so the soft edges snap back to
solid. Where two blurred circles overlap, their combined alpha passes the threshold, so they fuse
into one shape with a smooth neck between them.
Tuning the stickiness
Stickiness is the alpha multiplier in the colour matrix. Low values give soft, rounded joins that break apart early. High values give crisp edges that cling together for longer before they split.
FAQ
Why do I need an SVG for a CSS gooey effect?
CSS filters alone cannot apply a threshold to the alpha channel. The small hidden SVG supplies that filter, and CSS refers to it with filter: url(#goo). It adds no image file to the page.
Can I use the gooey filter on text or buttons?
Yes, but the filter blurs everything inside the container, so text becomes rounded and hard to read. Put text in a separate layer above the blobs and use the filter only on shapes.
Does the gooey effect work in every browser?
SVG filters on HTML elements work in all current browsers. Safari can render very large filtered areas slowly, so keep the gooey container to a sensible size such as a loader or a button group.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
Blob Generator
Make organic blob shapes with border-radius.
Floating Shapes
Add slowly rising, spinning shapes behind a hero section.
Loading Spinner
Design a CSS loading spinner and copy the code.
Bubble Background
Add see-through bubbles that wobble as they rise.
Orbit Animation
Planets circling a glowing sun on dashed rings.