— tool guide

Gooey Fluid Button Generator

Generate animated CSS buttons with a gooey fluid blob effect on hover. Customise colours, blob count, animation speed, and button label. Copy the ready-to-paste HTML and CSS.

Open Gooey Fluid Button Generator → free, no sign-in

— try it live open full screen ↗

— what it is

The gooey button effect combines SVG filters with CSS animation to create buttons where hovering reveals animated blobs that merge and flow like liquid. This tool generates the complete HTML and CSS for a styled button with the gooey effect, letting you tune every parameter and copy the production-ready code.

— what it does

✓Live interactive preview (hover the button to see the effect)
✓Adjustable blob count, size, and animation speed
✓Button and blob colour pickers with opacity control
✓Blur and contrast slider for the gooey merge threshold
✓Font size, padding, and border radius controls
✓Generate clean, self-contained HTML + CSS output
✓Copy HTML, CSS, or both together in one click

— who it's for

→UI developers building memorable CTA buttons
→Designers experimenting with organic motion in web interfaces
→Front-end engineers who want a high-impact effect without a JavaScript library
→CSS enthusiasts learning SVG filter-based animation

— how to use it

01 Open the Gooey Fluid Button Generator

02 Hover over the preview button to see the effect

03 Adjust colours, blob count, and animation speed

04 Fine-tune the blur and contrast for the merge appearance

05 Type your button label

06 Copy the generated HTML/CSS and paste it into your project

— 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

Does this require JavaScript?

No — the effect is pure CSS animation with an SVG filter. No JS library or runtime is needed.

Does it work in all browsers?

Yes — SVG filter effects and CSS animations are supported in all modern browsers.

Can I use multiple gooey buttons on the same page?

Yes — the SVG filter element only needs to appear once (in the HTML body). Multiple buttons can reference the same filter.

How do I control how "sticky" the blobs look?

Increase the blur radius to widen the merge zone. Increase the contrast to make the merge threshold sharper. Low blur + low contrast = gentle; high blur + high contrast = dramatic.

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 Gooey Fluid Button Generator → Browse all tools