Color blobs that melt and merge into each other like mercury. A single SVG filter does all of it.
The "goo" effect makes neighboring elements appear to physically merge into a single liquid shape when they get close enough. Each element keeps its color and shape, but the edges fuse into curving necks rather than overlapping flat. It's the visual signature of a lot of music and creative-coding sites, and works equally well for animated backgrounds and for clusters of buttons or pills.
Define an inline SVG <filter> on the page with two primitives: feGaussianBlur heavily blurs the contents, then feColorMatrix with a custom alpha matrix re-sharpens the edges of any pixel above a threshold. Apply filter: url(#goo) to any container — its children visually fuse when their blurred halos touch, but stay sharp-edged otherwise. Animate the children's position (or just hover them) to make the liquid shapes deform smoothly.
Background blobs drift and merge. The button row at the bottom is also gooified — hover any pill.
Color, motion, and surface — treated as one continuous material. Try hovering the buttons below.
Build a hero section with a liquid / goo effect. Add an inline hidden SVG with a filter id="goo" containing: feGaussianBlur stdDeviation=14, then feColorMatrix mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 22 -10", then feComposite in="SourceGraphic" in2="goo" operator="atop". Create a stage container with filter:url(#goo) holding 4 absolutely-positioned colored circles (hot pink, violet, cyan, amber) at varied positions, each with a CSS @keyframes that translates 80-140px in a slow 10-14 second ease-in-out infinite loop. The blobs will visibly merge into liquid mercury when their edges meet. Hero content sits at z-index above. Also apply the same filter to a button row at the bottom (3 colored pill buttons spaced ~14px apart) — the buttons will fuse on hover/proximity. Use mix-blend-mode:screen on the blobs for extra color richness. Background near-black #0a0a14 so colors pop.