— tool guide

CSS/SVG Gooey Effect Demo

Generate and preview the CSS/SVG gooey blob merge effect. Adjust blur, contrast, and animation speed, then copy the ready-to-use CSS filter snippet.

Open CSS/SVG Gooey Effect Demo → free, no sign-in

— try it live open full screen ↗

— what it is

The gooey effect makes nearby elements appear to merge and separate like blobs of liquid. It is achieved with two stacked CSS filters — a Gaussian blur followed by a high-contrast colour matrix — applied via an SVG element. This tool demonstrates the effect with animated blobs, lets you tune the blur radius and contrast threshold, and outputs the exact CSS filter declaration you need to reproduce it.

— what it does

✓Live animated blob demo with adjustable blob count and size
✓Blur radius control (the amount of Gaussian blur applied)
✓Contrast threshold control (how sharply the blobs merge)
✓Animation speed control
✓Background and blob colour pickers
✓Copy the CSS filter snippet and SVG filter declaration
✓Code explanation panel describing each parameter

— who it's for

→UI designers building organic, fluid menu animations
→CSS enthusiasts learning advanced filter technique
→Developers implementing blob-merge navigation or loading effects
→Anyone who wants to understand how the gooey filter actually works

— how to use it

01 Open the CSS/SVG Gooey Effect Demo

02 Watch the animated blobs merging in the preview

03 Adjust the blur and contrast sliders until the merge looks right

04 Change colours and animation speed

05 Copy the CSS filter string and paste it into your own stylesheet

06 Copy the SVG filter element to embed it inline in your HTML

— at a glance

Category	CSS Tools
Cost	Free
Sign-in required	No
Files uploaded	Never — runs in your browser
Published	May 11, 2026

— frequently asked questions

Why does this use an SVG filter instead of plain CSS?

Plain CSS has blur() but no colour matrix filter. The gooey effect requires a feColorMatrix step that only exists in SVG filters — the CSS filter: url(#goo) references it.

Does it work in all browsers?

Yes — SVG filter effects are supported in all modern browsers including Chrome, Firefox, Safari, and Edge.

Can I use this for a navigation menu?

Yes — apply the CSS filter to a container and place absolutely-positioned children inside. As they overlap they will merge visually.

What do the blur and contrast values do?

Blur spreads each element's edges outward. Contrast then snaps everything below a threshold to transparent and everything above to opaque, creating the sharp merge.

Is this free?

Yes — free with no sign-in.

— ready to use it?

Free, instant, no sign-in required. Opens directly in your browser.

Open CSS/SVG Gooey Effect Demo → Browse all tools