HTML and CSS Only Blobs

A few days ago I stumbled upon this tweet by Double Glitch.

It explains how to create blobs on Figma by simply using filters and blend modes. To my surprise, the blob was pleasing to play with and I decided to try and see if we can do it using CSS.

The Blob

I naively tried to do exactly the same as what was instructed in the tweet above. Creating an element with these CSS rules applied:

.blob {
  filter: blur(24px);
}
.rectangle {
  mix-blend-mode: color-dodge;
}

It doesn’t do anything remotely close to the one on Figma. It seems the color dodge on Figma and the one on CSS behave a little bit differently.

After some trials and errors, I found this one particular mix-blend-mode called plus-darker and plus-lighter — my IDE wasn’t showing autocompletion for these two so I thought maybe it was not supported. However, MDN said it exists https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

So I tried to add it to the blob, and to my surprise, it started to show something similar to the color-dodge effect on Figma.

The gooey effect of plus-darker

Okay but this looks blurry, maybe we can use color burn as mentioned in the tweet? Yep, it doesn’t work again. Figma is written in WASM for some of its parts, so it might do its own filter processing.

However, we can use contrast to somehow inflate the blurs. Forcing the color to be either [1, 0] with enough contrast.

#app {
  ...
  background: #fff;
  filter: contrast(12);
}
.blob {
  mix-blend-mode: plus-darker;
  filter: blur(24px);
  background: #000;
  ...
}

Now that we flatten the color, we are removing the blurriness of the blobs and sharpening their edges.

A plus-darker and a contrast are all we need

So we’re done here, we managed to create a blob-like figure using HTML and CSS only.

There are some limitations to this approach, such as the blob can only be in a solid color compared to the one in the tweet with a gradient.

Sprinkling Some JS

Now it looks blobby, but we want the blob to move around because it’s not looking at a still blob is not satisfying.

Equipped with some custom VDOM approach and a little bit of animation, we can make the blob moves like crazy as they interact with each other.

You can see it moving in real-time at https://js-ndottv.stackblitz.io — go ahead and have fun!