Design Atlas
한국어
✦ Visual effects

Gooey effect

구이 이펙트

Shapes that appear to melt together into one blob as they get close — used for floating menu buttons whose items "ooze" out and merge.

Also known as: MetaballBlob mergeSVG goo filter
···
html
<svg width="0" height="0"><defs><filter id="goo">
<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" result="goo"/>
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter></defs></svg>
<div class="goo"><div class="ball x1"></div><div class="ball x2"></div><div class="ball x3"></div></div>
css
.goo{position:relative;width:240px;height:130px;filter:url(#goo)}
.ball{position:absolute;width:56px;height:56px;border-radius:50%;top:37px}
.x1{left:20px;background:var(--accent);animation:m1 4s ease-in-out infinite}
.x2{left:92px;background:var(--accent-2);animation:m2 4s ease-in-out infinite}
.x3{left:164px;background:var(--accent-3);animation:m3 4s ease-in-out infinite}
@keyframes m1{50%{transform:translateX(40px)}}
@keyframes m2{50%{transform:translateY(-18px)}}
@keyframes m3{50%{transform:translateX(-40px)}}

Blur the shapes' edges together, then push the alpha channel's contrast to an extreme with feColorMatrix, snapping the blurred grey boundary back into a hard alpha edge. Wherever two shapes' blurred halos overlapped, that region now reads as one solid blob.

Plain CSS filter can't produce this combination on its own — you apply an SVG filter containing feGaussianBlur + feColorMatrix + feComposite to the element via filter: url(#goo).

When to use

Use when a floating action button opens and submenu items ooze out, or for loading indicators. Avoid text — thin strokes get mangled.