Attack of the Blob-Based Animated Backgrounds in Web Design

Animated backgrounds are a popular feature of modern websites. It is no longer a trend or something extraordinary. It is just one of the viable ways to adorn a hero area these days. Although there is still an issue with browser compatibility, the solution has managed to carve out a niche for itself.

There are different kinds of animations. You can stumble upon:

• Particle animations;
• Kaleidoscopic animations;
• Abstract 3D animations;
• Smooth geometric animations, and much more.

While several years ago constellation-inspired particle animations were ruling the roost, nowadays blob-shaped animations excite the minds of creative teams. What can you do? The liquid behavior is irresistible. The morphing routine that shows how a big drop smoothly moves in the space easily wins over the online audience and puts your website in the lead.

To benefit from this mainstream technique, we offer you a collection of outstanding code snippets that will give you a hint of how to build your own blob-shaped animation. You can do so with either traditional or brand-new tools. Now, let’s find the perfect match for your next project.

Blob animation by Uwe Chardon

Uwe Chardon’s take on this popular solution is practical and inspiring. It features a simple, flat blob with a beautiful orange coloring and smooth edges placed in a clean environment. He managed to imitate the liquid behavior pretty well.

The result is a winning combination of a simple shape and intricate behavior that looks quite impressive.

See the Pen Blob animation pure CSS by Uwe Chardon

Blob by Ashton Holgate

The previous example depicts a traditional kind of blob with an irregular shape and relatively expressive morphing. However, this project by Ashton Holgate sticks to a more divine shape, which almost borders with the circle, and changes are barely noticeable. Nevertheless, it also looks outstanding.

The more so, the artist has also played with the text, forcing it to shift its color to the opposite one when it hits the bubble’s area.

See the Pen Blob by Ashton Holgate

Bouncing Liquid Loader by Fabio Ottaviani

Fabio Ottaviani has put into practice the playful nature of gooey behavior that is inherent to blob animations. His bubble is small, yet it produces quite an impact with its adorable morphing and funny bouncing.

Although the nameplate of the pen project reads “Loader”, it can be easily turned into a decorative detail of the background. And to do this all you need to know is HTML and CSS, since the artist does not use any JavaScript magic at all. Smart.

See the Pen Bouncing Liquid Loader by Fabio Ottaviani

Canvas Blob Test by Shaw

Unlike the previous example, this drop is purely generated by JavaScript. So be ready to dive into an exciting solution and intricate play with the graphics. What’s more, the concept differs from the others with its primitive look, along with a quite smooth and calm behavior that brings about an overall serene atmosphere.

It is pretty universal and neutral. Thus, it could become a perfect background animation for numerous projects.

See the Pen Canvas Blob Test by Shaw

Blob by Jeffrey

This solution by Jeffrey is a winning combination of two trends. Here, you can find a spotty background that is highly popular these days and the liquid behavior that prevails over the other options.

The code snippet is made with HTML, CSS and JavaScript. It looks consistent across various browsers and devices. The artist uses a basic spring algorithm that makes interaction with the huge blob feel real and non-artificial.

Note, even though the blob occupies half of the scene, it does not overpower onlookers. The smooth, serene behavior stands behind this unobtrusiveness.

See the Pen Blob by Jeffrey

Blobs by Charlotte Dann

If one blob is not enough to produce a proper impression, then you can always go for a dozen of them. Charlotte Dann, with her ingenious code snippet, will show you how to do this without ruining the general effect and overwhelming visitors.

Her code snippet is just a treat for the eye. It features lots of small moving blobs that interact with each other. Each one looks like a little spot of light. Together, they form one huge blob that exudes warmth on all fronts.

See the Pen Blobs by Charlotte Dann

Now, let’s move from the flat world into a 3-dimensional one.

Blob by Georgi Nikoloff

Blob by Georgi Nikoloff is a point-in-case. It immediately strikes an eye with its vibrant coloring, high-tech appearance and dynamic behavior. The developer makes the most out of the advanced technologies, using WebGL, GLSL and shaders to his advantage. Even though the solution is subject to browser compatibility, it looks inspiring.

See the Pen blob by Georgi Nikoloff

Experiment #6 by Daniel Del Core

Daniel Del Core shows the online audience how to play with Simplex noise and spruce it up with some vigilantly reproduced textures. The result is a candy-inspired, paint-like ball. Although it moves pretty fast, it is so mesmerizing that it is difficult to take your eyes off of it right away.

See the Pen Experiment #6 by Daniel Del Core

Fake particle blob by Eli Fitch

Unlike the previous example, which has a bold personality and the charisma of a pop-star from the spandex-obsessed ‘80s, this one feels like a thing from the modest techno future. The blob is constructed from tiny particles that become brighter under some angles to achieve a 3D appearance.

Predictably, the artist employs Three.js magic and some ingenious work with procedural texture to pull off this concept.

See the Pen #3December fake particle blob by Eli Fitch

CSS Blob Generator by Edwin Chen

We are going to end our collection with CSS Blob Generator by Edwin Chen. As the title states, this pen features a small playground where you can create a blob shape.

Here you will find a small panel where you can assign a radius to each border. Although it is static and flat, you can easily copy the result and set it into motion with the help of JavaScript.

See the Pen CSS Blob Generator by Edwin Chen

The Perfect Shape for a Calming Atmosphere

It is not surprising that the smooth and calm nature of liquid behavior is getting popular these days. Like a small mesmerising stream that runs through the forest, it lures you in and serves as an island of serenity in the ever-changing online world.

The blob-based animations are just destined to benefit modern projects. They are unobtrusive, even though they certainly command attention. Whether you go for elegant, flat realization or extravagant 3D, it will easily establish a calm atmosphere.

It will enrich the experience, adorn the background and, at the same time, give way to the content. These backgrounds will help you keep the balance between visual and textual data.