NewSmall JS · SVG filter · transform

Goo

The element floods with colour and oozes out in liquid drips that pull away and melt back in.

A free gooey hover effect in HTML and CSS (with a few lines of JavaScript). Also known as gooey button, liquid blob animation, SVG goo filter or metaball effect.

Class: .CCGoo
Weight: 2.4 KB
Needs: CSS + a few lines of JS
Best for: Playful brands, food, kids, creative studios

Tune it

Every snippet on this page follows these settings.

How the Goo hover effect works

Script adds a background layer with the element's fill and four drips sitting just inside its edges, and one shared SVG 'goo' filter to the page.
The filter blurs the layer, then sharpens its alpha hard, so shapes that touch melt together.
On hover each drip stretches out of its edge, pinches off and melts back in, on its own beat.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCGoo">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Goo on button, dropdown, card.

More ways to use it

The same class on badge.

The Goo code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCGoo {
  position: relative;
  isolation: isolate;
  background: transparent;
  transition: color calc(.35s / var(--cc-speed)), border-color calc(.35s / var(--cc-speed));
}
.CCGoo:is(:hover, :focus-visible) { border-color: transparent; color: var(--cc-on-accent); }
.CCGoo .CCGoo-bg { position: absolute; inset: -14px; z-index: -1; border-radius: inherit; filter: url(#cc-goo); pointer-events: none; }
.CCGoo .CCGoo-bg i {
  position: absolute;
  background: var(--cc-bg);
  border-radius: 999px;
  transition: background-color calc(.35s / var(--cc-speed));
}
.CCGoo:is(:hover, :focus-visible) .CCGoo-bg i { background: var(--cc-accent); }
.CCGoo .CCGoo-bg i:first-child { inset: 14px; border-radius: inherit; }
.CCGoo .CCGoo-bg i:not(:first-child) { width: 22px; height: 22px; }
.CCGoo .CCGoo-bg i:nth-child(2) { left: calc(26% + 3px); top: 15px; --dx: 0px; --dy: -20px; }
.CCGoo .CCGoo-bg i:nth-child(3) { left: calc(66% - 8px); bottom: 15px; --dx: 0px; --dy: 22px; --d: calc(.5s / var(--cc-speed)); }
.CCGoo .CCGoo-bg i:nth-child(4) { left: 15px; top: calc(50% - 11px); --dx: -20px; --dy: 0px; --d: calc(.85s / var(--cc-speed)); }
.CCGoo .CCGoo-bg i:nth-child(5) { right: 15px; top: calc(50% - 11px); --dx: 20px; --dy: 0px; --d: calc(.2s / var(--cc-speed)); }
.CCGoo:is(:hover, :focus-visible) .CCGoo-bg i:not(:first-child) { animation: cc-goo calc(1.7s / var(--cc-speed)) cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite; }
@keyframes cc-goo {
  0%, 100% { transform: none; }
  45% { transform: translate(calc(var(--dx) * var(--cc-intensity)), calc(var(--dy) * var(--cc-intensity))) scale(.9); }
  62% { transform: translate(calc(var(--dx) * 1.3 * var(--cc-intensity)), calc(var(--dy) * 1.3 * var(--cc-intensity))) scale(.78); }
}
.CCGoo :is(.CCCard-eyebrow, .CCCard-price, h3, p) { color: inherit; }
@media (prefers-reduced-motion: reduce) { .CCGoo .CCGoo-bg i { animation: none !important; } }

Show the JavaScript

if (!document.getElementById("cc-goo")) document.body.insertAdjacentHTML("beforeend", '<svg width="0" height="0" style="position:absolute" aria-hidden="true"><filter id="cc-goo"><feGaussianBlur in="SourceGraphic" stdDeviation="6" result="b"/><feColorMatrix in="b" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"/></filter></svg>');
document.querySelectorAll(".CCGoo").forEach(function (el) {
  if (el.dataset.ccGoo) return; el.dataset.ccGoo = 1;
  el.insertAdjacentHTML("afterbegin", '<span class="CCGoo-bg" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>');
});

Pairs well with

Avoid on the same element Moonrise (clipping), Glare Sweep (clipping), Ripple (clipping), Liquid Fill (fill), Ink Pour (fill), Northern Lights (fill), Stack Pop (fill), Metal (fill), Arrow Slide (fill), Grain (fill), Pixel (fill).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

The label sits above the filtered layer, so it stays crisp and readable.
Off under reduced motion.

Performance

2.4 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Goo

What is a gooey hover effect?

The element floods with colour and oozes out in liquid drips that pull away and melt back in. Goo is a free gooey hover effect, also known as gooey button or liquid blob animation, that works on buttons, dropdowns, cards and more.

How do you make a gooey hover effect in CSS?

Script adds a background layer with the element's fill and four drips sitting just inside its edges, and one shared SVG 'goo' filter to the page. The filter blurs the layer, then sharpens its alpha hard, so shapes that touch melt together. On hover each drip stretches out of its edge, pinches off and melts back in, on its own beat.

How do I add Goo to a button?

Add the class CCGoo next to CCButton, inside an element with the CCTheme class, then include the Goo CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Goo need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Goo?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Goo accessible?

The label sits above the filtered layer, so it stays crisp and readable. Off under reduced motion.

Can I use Goo in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCGoo to a button or block, and paste the JavaScript into the footer code area.

Is Goo free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.