Liquid chrome

Build a liquid-metal background as a pure CSS effect. No canvas, no shader, no JavaScript. Silver shapes drifting on black, merging into each other and pulling apart again like mercury.

THE MECHANISM, which is the entire trick

Two filters on one container: blur, then extreme contrast.

Blur spreads each shape's edge into a soft ramp. The contrast pass forces every pixel of that ramp to either full or nothing, so the edge snaps hard again. But where two blurred shapes overlap, their ramps ADD, cross the threshold sooner, and the pair fuses with a smooth neck between them. Move them apart and the neck thins, pinches and breaks.

Nobody writes any physics. That is just what a threshold does to two overlapping gradients, and it looks exactly like surface tension.

    .field {
      position: absolute;
      inset: -8%;
      background: #000;
      filter: blur(18px) contrast(11);
    }
    .blob { position: absolute; border-radius: 50%; }

Six blobs inside .field, each with its own size, start position and keyframe animation.

THE TWO SETTINGS THAT DECIDE HOW IT LOOKS

- CONTRAST sets the surface tension. Low merges lazily and looks gooey; high snaps and looks like metal. 11 is a good starting point.
- BLUR sets the scale of the necks: how far apart two blobs can be and still connect. 18px suits blobs at 10–20% of the frame.

They move together. Raise the blur and you must raise the contrast to keep the edge hard.

KEEP THE SOURCE SHAPES ALMOST GREY

This is the mistake to avoid and it is not obvious. The contrast pass amplifies whatever saturation you give it, clipping each colour channel independently, so a saturated violet blob clips to a flat magenta, a warm one clips to red, and you get a lava lamp instead of chrome. Use near-neutrals with only a few points of tint (#b5aec6, #9c8a84, #d3d0de and similar). Mercury is greyscale; the colour you want comes from the edges, where two different tints meet and clip differently. That fringing is the iridescence, and it is worth more than colouring the blobs ever would be.

Pure black inside the filtered container, too. Anything lighter and the contrast lifts the whole backdrop into a grey haze, and the silhouettes stop reading as solid.

MOTION

Six blobs, all different sizes, all travelling different distances on unequal periods between about 15 and 35 seconds, ease-in-out, alternating. Unequal is the point: matched cycles make the whole field pulse as one, which is the tell that it is six divs. Let them travel a long way, 40–80% of the frame, so pairs genuinely meet and separate rather than jostling in place.

COST AND ACCESSIBILITY

One blur and one contrast pass over the layer, plus six animated transforms. The filter is the expensive part, so keep the blur modest and let the contrast do the work of looking sharper than it is. Never put a filter on each blob, one pass for the whole field.

Under prefers-reduced-motion, pause the animations rather than removing them. The blobs freeze mid-merge, which is a composition rather than a blank screen: the shapes are the effect here, and they survive stillness perfectly well.

Mark the wrapper aria-hidden. It is decoration.