DEV Community

Cover image for Making a CSS blob
Mattia Astorino
Mattia Astorino

Posted on

Making a CSS blob

Some days ago i was trying to make an animated blob using just the CSS as a personal experiment and research. The big issue with the blob was the curvy-shape that was should randomly morph with a slow animation.

The only way i found to make this kind of transformation is using the multi-step border-radius values that allow you have more controls over the edge of the element.

Image from Medium

First I needed to read more informations about the multi step border-radius, and this css-tricks article was perfect. So i started writing code to prepare all the things but i noticed immediately that handling the multi values border radius was not so easy as I expected. After a bit of googling I came on this article and their awesome tool. This helped me to learn more about this approach and generating the values of the border-radius property.

By adding a bit of movement and colours I got what i wanted. Here you can check the final result.

Follow me to get more about CSS tricks!

Top comments (4)

brianemilius profile image
Brian Emilius

This is line watching a digital lava lamp!
Nice work :)

vitalcog profile image
Chad Windham

Nice! A lot of people downplay CSS. But it takes a LOT of time and effort to get really good at it! Thanks for sharing this!

supremebeing09 profile image
nils binder πŸ³οΈβ€πŸŒˆ

I'm so glad my tool helped you to build what you wanted to. And your animation looks stunning. I may use something like this in my next project :-)

equinusocio profile image
Mattia Astorino

Your tool is pretty awesome. Really helped me to visualize the shapes.