How this works

Since this experiment has accrued the attention of many an eye, I thought I'd put together an explanation of how it works. The bulk of the effect is from the combination of a blur filter (filter:blur(radius)) on two circle-shaped elements and contrast filter (filter:contrast(magnitude)) on the containing element.

A note on browser support

In case you're using a browser that doesn't support the filter CSS property (that includes IE11 - sadly), here's what it should look like. It does however work in Edge, Chrome and Firefox, with mildly different properties.


The blur filter allows the two circles to mix together. In this example the slightly out of sync rotating colour produces a number of unique mixes, showing you how the similar and different colours interact with the applied metaball effect.


The contrast effect essentially rounds the pixels rendered by .box's layer to their nearest 3-bit colour representation. This produces a stark line where the thresholds for each colour jump. The "metaball" or surface-tension effect is a result of this threshold line following a smooth contour where the blurred circles blend into each other and into the black background. If the colours of the two circles are similar, they "stick". If they are different, the resulting overlap is rounded to black and looks like they're repelling.

3-bit Colour

This is a little demonstration of what cranking the contrast on a gradient does. All colours will lose their brightness and be rounded to their closest primary/secondary colour. Given a darker rainbow, the primary colours take up a wider band once the effect is applied.


The light border effectively decreases the difference between the overlapping blurred circles from the lightness threshold required to round to a colour and not round to black. The effect is somewhat akin to a refractive edge.


The effect around the outside of the box (in Chrome) resembles a kind of reflection effect. The black box-shadow on the surrounding box pushes the threshold up for colour to be rounded to black nearest the box. In Firefox it appears to act how you would expect, blending with the black in a normal way. This probably indicates some low-level way in which the two rendering engines differ, don't ask me though!