The Gooey / Liquid Effect, Explained — How SVG Filters Make Things Flow

You've seen it — pill menus where the selector oozes between tabs, blobs that merge like liquid metal, buttons that flow into each other. It's called the gooey (or metaball) effect, and it looks like witchcraft. It's actually just three SVG filter primitives stacked together.

The whole trick is 3 lines

You apply ONE SVG filter to a container, and the shapes inside start merging:

<filter id="goo">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  <feColorMatrix in="blur" type="matrix"
    values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
  <feBlend in="SourceGraphic" in2="goo" />
</filter>

Then: filter: url('#goo'); on the parent. Done.

Why it works, step by step

1. feGaussianBlur softly blurs everything, so neighboring shapes' fuzzy edges start to overlap.
2. feColorMatrix is the magic. That last row — 0 0 0 18 -7 — operates only on the alpha (opacity) channel: multiply alpha by 18, subtract 7. This cranks the contrast so those soft blurred pixels snap to either fully solid or fully gone — turning the blur into crisp, merged blobs.
3. feBlend puts the sharp original graphic back on top so any text stays readable.

The Safari gotcha (learn from our scars)

The feColorMatrix alpha trick degrades in some Safari and Firefox versions — it can fall back to a plain blur without the merge. So: test in Safari, and ship a graceful fallback (a plain blur() + contrast() CSS filter, or static shapes). Never assume the goo renders everywhere.

When to use it (and when not)

Gooey is a delight layer — a blob menu, a reaction slider, a loading state. It is NOT a foundation. Used sparingly it feels alive and premium; slathered everywhere it reads as a gimmick and hurts legibility. On our own sites we reach for liquid/displacement motion in exactly one moment — a reveal, a shock, a transition — never page-wide.

Want interactive touches like this on your site, done tastefully and fast? Reach out — this is our favorite kind of work.

Related: the 2026 web design trends we're actually shipping — where effects like this fit (and where they don't).