Gooey Text Morph — Free HTML CSS JS Goo Filter Snippet

Gooey text morph is the liquid typography effect where one word appears to melt and reform into the next, the letters blobbing together as they cross-fade — the same metaball look used for gooey menus, applied to type. This snippet builds it with plain HTML, an SVG filter, CSS animation, and a little vanilla JavaScript to cycle through your own list of words.

The SVG goo filter

The morph relies on the classic goo filter, #gtGoo. It blurs the source with feGaussianBlur, then passes the result through a feColorMatrix that sharply boosts the alpha channel (0 0 0 19 -8), thresholding the soft blur back into hard shapes. Applied to a container, this makes any blurred forms inside merge: where two semi-transparent, blurred letters overlap, they fuse into one continuous blob. As one word fades out and another fades in over the same area, their blurred glyphs momentarily melt together — the gooey transition.

Two stacked word layers

Inside the filtered container sit two absolutely-positioned word layers, A and B, occupying the same space. CSS keyframes (gtA and gtB) cross-fade them on a 4-second loop: while A holds at full opacity and scale, B is hidden and shrunk, then they swap, each scaling between 0.6 and 1 as it fades. Because both layers are blurred and overlapping during the handoff, the goo filter fuses their letters mid-transition so the change reads as a liquid morph rather than a simple dissolve. The scale change adds a gravitational "pull" to the melt.

Cycling arbitrary words

The two layers only ever show two words at a time, but JavaScript rotates through a longer WORDS list so the morph keeps presenting new pairs. On each cycle it advances and assigns the next words to the layers while they're transitioning, so words are swapped during their hidden phase — you only ever see two words melting into each other, never a word changing in plain view. Supply any list (a tagline, a set of verbs, feature names) and the loop handles the rest.

Why this approach is cheap

The entire morph is GPU-friendly: the goo filter is applied once to a small container, and only opacity and transform animate — no per-frame JavaScript drawing, no canvas. That keeps it smooth even on modest devices, and the filter is reusable across multiple morphs on a page.

Type and layout

The words are heavy, tightly-tracked, and large (clamp scales them responsively), which gives the blur enough mass to blob convincingly — thin text doesn't goo well because there isn't enough ink to merge. The container has a fixed height so the absolute layers have a stable box to morph within.

Customizing it

Edit the WORDS array, tune the filter's stdDeviation and alpha matrix for more or less gooeyness, change the loop timing, recolor the text, or adjust the scale range in the keyframes for a stronger melt. Pair it with a text generate reveal or a liquid button to extend the gooey theme across a page.