CSS Gooey Liquid Effect

Features

• Blur and contrast adjusted separately — their ratio decides how continuous the edge is
• Adjustable shape size (children inherit it)
• Adjustable travel speed, so you can watch the bridge form and break
• The preview drifts two circles together and apart
• The output includes both container and child rules, with both prerequisites noted
• `filter` on the container, `background: currentColor` on the children — one place to change the colour
• A `prefers-reduced-motion` fallback is included automatically
• Syntax-highlighted code with a one-click copy button
• Everything is computed in your browser

How to use

1. Start with the blur radius: bigger makes a thicker bridge but also blurs the shapes themselves
2. Then the contrast: it sets how hard the edge is pressed — too low and the edge breaks into dashes
3. Adjust shape size and travel speed to see when the bridge forms and snaps
4. Copy the CSS — and do not add `overflow: hidden` to the container

FAQ

Why can the container not use `overflow: hidden`?

Because the bridge is exactly the overflowing part. The blur expands each shape outward, and the high contrast presses that expansion into a solid edge — the portion between elements is the bridge. With `overflow: hidden` the overflowing part is clipped, the bridge is cut off at the container boundary, and it looks like two blocks chopped apart. It is the most common way this effect fails, and the symptom is obvious: everything "goes square".

Why do the children have to be solid colours?

Because the edge is pressed from the grey-level difference left by the blur. A translucent or pale colour blurs to a very small difference between neighbouring areas, and when contrast amplifies that, the resulting edge is broken and dotted instead of continuous. Dark, saturated solid colours retain a clear gradient after blurring, so the pressed edge holds together. The delivered code uses `background: currentColor` so a child can inherit one solid colour.

Does this effect cost performance?

Yes, and not a little. A `filter` on the container means the browser renders the whole container — children included — into an offscreen layer, blurs and contrasts it, then composites it back. Any child movement redoes that entire layer. So: not on a large container or one with many children, not on a container that scrolls, and no complex content inside. It suits a small, tight group of elements.

Can I use it on text?

Yes, but note that the text is blurred and pressed back too, so strokes thicken, detail is lost, and thin type turns to mush. It suits large, heavy headings only, and the contrast should be lower than for shapes (or the strokes fuse together). Also the text has to sit in a child element — if the container itself holds the text, the container is what gets pressed.