How does the CSS gooey effect work?

It is an SVG filter, not a CSS property. The filter first blurs everything inside the element (feGaussianBlur), so nearby shapes bleed into each other. Then a colour matrix multiplies the alpha channel and subtracts an offset (feColorMatrix), which turns the soft blurred edge into a hard edge again. Where two blurred shapes overlap, their combined alpha stays above the cut-off, so a bridge of solid colour appears between them and they look like they are melting together. You apply it with filter: url(#gooey-filter).

What do blur, edge sharpness and merge threshold change?

Blur is the radius of the blur step: a bigger value lets shapes join from further apart but also rounds off corners. Edge sharpness is the alpha multiplier in the colour matrix (the 18 in the classic 18 -7): higher values give crisp edges, lower values leave a soft fringe. Merge threshold is the alpha level that still counts as solid; the generator turns it into the offset value for you (sharpness × threshold, negative). A lower threshold makes the shapes bridge across wider gaps.

Why is the text inside my gooey element blurry?

The filter blurs and re-thresholds everything inside the element, text included, so letters get lumpy. This is why the generated menu and button keep only plain coloured shapes inside the filtered layer and put the text and links in a separate layer on top, outside the filter. Do the same in your own markup: filter the shapes, not the content.

Does the gooey filter work in all browsers and on mobile?

filter: url(#id) with an inline SVG filter works in current Chrome, Edge, Firefox and Safari, but Safari can render it slowly or with blank edges on large or animated areas. Keep the filtered area as small as you can, avoid filtering the whole page, and test on a real phone. The filter is re-computed on every animation frame, so many large moving shapes can drop frames on low-end devices. The generated CSS switches animations off for visitors who prefer reduced motion.

Can I change the colours, number of items or the direction?

Yes. Pick any colour, the number of orbiting blobs (2–8), menu items (2–8) or drips, and their size. The menu can open upward, right, downward or left, with adjustable spacing. For several colours in one gooey group, edit the CSS and give individual shapes their own background; the colour matrix leaves the RGB channels unchanged, so shapes keep their colour and only the shared edges blend.

CSS GOOEY EFFECT GENERATOR

Make shapes melt into each other like liquid with an SVG goo filter, then copy the CSS, HTML and filter.

In short

Build a gooey effect, where shapes stretch and melt into each other like liquid: merging orbiting blobs, a menu that pours out of its button, or a button that drips on hover. You get the SVG filter, the CSS and the HTML to copy, with sliders for blur, edge sharpness and merge threshold, and a link that saves your settings. It runs in your browser and nothing is uploaded.

The blobs orbit a centre blob and stretch into each other.

Effect

Blur: 10pxEdge sharpness: 18Merge threshold: 40%Orbiting blobs: 5Blob size: 56pxOrbit time: 8s

Colour

.gooey-blobs {
  position: relative;
  width: 260px;
  height: 260px;
  filter: url(#gooey-filter);
}

.gooey-blobs span {
  --r: 0px;
  --a: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: #ff6a35;
  transform: rotate(var(--a)) translateX(var(--r));
  animation: gooey-orbit 8s linear infinite;
}

/* The first blob stays in the middle and the others orbit it */
.gooey-blobs span:first-child {
  animation: none;
  transform: scale(1.3);
}

.gooey-blobs span:nth-child(2) { --r: 50px; --a: 0deg; animation-duration: 6s; }
.gooey-blobs span:nth-child(3) { --r: 76px; --a: 72deg; animation-duration: 8s; animation-direction: reverse; }
.gooey-blobs span:nth-child(4) { --r: 96px; --a: 144deg; animation-duration: 10s; }
.gooey-blobs span:nth-child(5) { --r: 50px; --a: 216deg; animation-duration: 12s; animation-direction: reverse; }
.gooey-blobs span:nth-child(6) { --r: 76px; --a: 288deg; animation-duration: 6s; }

@keyframes gooey-orbit {
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
  .gooey-blobs span { animation: none; }
}

Example output (default settings)

CSS

.gooey-blobs {
  position: relative;
  width: 260px;
  height: 260px;
  filter: url(#gooey-filter);
}

.gooey-blobs span {
  --r: 0px;
  --a: 0deg;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  background: #ff6a35;
  transform: rotate(var(--a)) translateX(var(--r));
  animation: gooey-orbit 8s linear infinite;
}

/* The first blob stays in the middle and the others orbit it */
.gooey-blobs span:first-child {
  animation: none;
  transform: scale(1.3);
}

.gooey-blobs span:nth-child(2) { --r: 50px; --a: 0deg; animation-duration: 6s; }
.gooey-blobs span:nth-child(3) { --r: 76px; --a: 72deg; animation-duration: 8s; animation-direction: reverse; }
.gooey-blobs span:nth-child(4) { --r: 96px; --a: 144deg; animation-duration: 10s; }
.gooey-blobs span:nth-child(5) { --r: 50px; --a: 216deg; animation-duration: 12s; animation-direction: reverse; }
.gooey-blobs span:nth-child(6) { --r: 76px; --a: 288deg; animation-duration: 6s; }

@keyframes gooey-orbit {
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)); }
}

@media (prefers-reduced-motion: reduce) {
  .gooey-blobs span { animation: none; }
}

HTML + SVG filter

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <defs>
    <filter id="gooey-filter" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7.2" />
    </filter>
  </defs>
</svg>

<div class="gooey-blobs">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

How to make a gooey effect

1
Choose the effect: merging blobs, a gooey menu or a drip button, or start from a preset such as Liquid blobs, Candy menu or Drip button.
2
Watch the live preview. Click the + button of the menu, or hover the button, to trigger the effect.
3
Tune the blur, edge sharpness and merge threshold until the shapes join the way you like, then set the colour, size and number of blobs, items or drips.
4
Open the CSS and HTML tabs and copy each one. The HTML includes the small inline SVG that holds the filter, so paste it once on the page.
5
Use Copy link to share the exact settings with someone else.

Questions

How does the CSS gooey effect work?: It is an SVG filter, not a CSS property. The filter first blurs everything inside the element (feGaussianBlur), so nearby shapes bleed into each other. Then a colour matrix multiplies the alpha channel and subtracts an offset (feColorMatrix), which turns the soft blurred edge into a hard edge again. Where two blurred shapes overlap, their combined alpha stays above the cut-off, so a bridge of solid colour appears between them and they look like they are melting together. You apply it with filter: url(#gooey-filter).
What do blur, edge sharpness and merge threshold change?: Blur is the radius of the blur step: a bigger value lets shapes join from further apart but also rounds off corners. Edge sharpness is the alpha multiplier in the colour matrix (the 18 in the classic 18 -7): higher values give crisp edges, lower values leave a soft fringe. Merge threshold is the alpha level that still counts as solid; the generator turns it into the offset value for you (sharpness × threshold, negative). A lower threshold makes the shapes bridge across wider gaps.
Why is the text inside my gooey element blurry?: The filter blurs and re-thresholds everything inside the element, text included, so letters get lumpy. This is why the generated menu and button keep only plain coloured shapes inside the filtered layer and put the text and links in a separate layer on top, outside the filter. Do the same in your own markup: filter the shapes, not the content.
Does the gooey filter work in all browsers and on mobile?: filter: url(#id) with an inline SVG filter works in current Chrome, Edge, Firefox and Safari, but Safari can render it slowly or with blank edges on large or animated areas. Keep the filtered area as small as you can, avoid filtering the whole page, and test on a real phone. The filter is re-computed on every animation frame, so many large moving shapes can drop frames on low-end devices. The generated CSS switches animations off for visitors who prefer reduced motion.
Can I change the colours, number of items or the direction?: Yes. Pick any colour, the number of orbiting blobs (2–8), menu items (2–8) or drips, and their size. The menu can open upward, right, downward or left, with adjustable spacing. For several colours in one gooey group, edit the CSS and give individual shapes their own background; the colour matrix leaves the RGB channels unchanged, so shapes keep their colour and only the shared edges blend.

Related tools

All Color & CSS Tools →

Updated November 6, 2026