Blob Recipes in CSS

Blob, Blob, Blob. You either hate them or love them. Personally, as someone not well-versed in design, I tend to overuse them. And when you repeat the same process repeatedly, it becomes a matter of optimizing it, or in this case, finding the easiest way to create blobs in CSS. As always, there are numerous methods.

To determine if our blobs are worth using, they need to pass three tests:

1. They can be created with just a single element (preferably without pseudos).
2. They can be easily designed (ideally through an online tool).
3. We can apply gradient backgrounds, borders, shadows, and other CSS effects on them.

Without further ado, let’s Blob, Blob, Blob right in.

Just generate them online

It might be disappointing to read an article about making blobs in CSS only to find out you can generate them outside CSS. Still, it’s probably the most common way to create blobs on the web. Here are some online tools I’ve used before to create SVG blobs:

• Haikei. This is the tool I’ve used the most since, besides blobs, it can generate lots of SVG backgrounds.
• Blobmaker. A dedicated tool for making blobs, now part of Haikei, so you can use both.
• Almost all graphic programs allow you to hand-draw blobs and export them as SVGs.

For example, here’s one I generated just now. Keep it around, as it will come in handy later.

Using border-radius

Although it may seem counterintuitive, the border-radius property can be used to create blobs. This technique is not new; it was first described by Nils Binder in 2018, yet it remains relatively unknown. Even for those who use it, the inner workings are not entirely clear.

You may know the border-radius is a shorthand for each corner’s radius, going from the top left corner clockwise. For example, we can set each corner’s border-radius to get a bubbly square shape:

.blob {
  border-radius: 25% 50% 75% 100%;
}

The border-radius property shapes each corner following a circle of the given radius. For instance, if the top left corner is set to 25%, it will follow a circle with a radius 25% the size of the shape.

.blob {
  border-top-left-radius: 25%;
}

What’s less known is that each corner property is still a shortcut towards its horizontal and vertical radii. Normally, you set both radi