Get 10 Free 
Special effects have been used in web design for years (Flash, anyone?). But today’s technology affords designers better ways to integrate them into our projects. Between CSS, a host of JavaScript libraries and users with powerful hardware, we have all the resources we need to create compelling effects.
Among the most sought-after and complicated effects are liquid simulations. To do it right, it takes power – from both code and processors. Luckily, those items are no longer in short supply.
Thus, we’ve found a number of examples of liquid effects that are out of this world. Some look eerily realistic, while others are more reminiscent of a sci-fi fantasy. Let’s take a look:
The Blob Comes Alive
This rippling, liquid mass is mesmerizing to look at. But when you find out that it’s also interactive, it becomes even more impressive. The blob rotates along with your cursor, giving this WebGL-powered snippet the appearance of being a sphere that’s floating out in space.
Sorry, I Prefer a Shiny Blob
Staying with the spherical theme, this example demonstrates a more well-formed liquid. And, even though we don’t see things like this floating around (well, not on Earth, anyway) the shiny texture and blue color project a realistic look. The checkered pattern within the liquid also helps here, as it gives off a swimming-pool vibe.
Wiggly, Jiggly Button
While it’s tempting to think of liquid effects in terms of a full-screen presentation, it can also work in smaller forms. This button looks ordinary at first, but upon hover it becomes a quivering hunk of JELL-O. It’s seriously fun to play with! While the amount of JavaScript it takes to power this little guy may be impractical for real-world use, it does show that a small UI element can make a big impact.
A Drop in the Button
There is a lot of talk about microinteractions these days. Those little details can do wonders for the user experience. Take this humble radio button. When clicking it, you get more than just a plain old dot in the middle. In this instance, the button uses a neat animation to make it look as though a drop of liquid has filled in your choice. It’s simple, quick and effective.
Liquid Loader
The loading graphic is one of the long-standing traditions in web design. So much so that it almost gets a little boring. But this liquid-filled example is both unique and fun. It would be the perfect compliment for say, a beverage company or pub. Best of all, no JavaScript required!
Juice Me Up
Inspired by an Android charging animation, this snippet offers gentle waves and a generous helping of bubbles. Using the slider, you can raise or lower the fill level. Toggle switches let you change the color and the type of bubbles you want to see.
Morphing Liquid Rainbow Experience
Here is a perfect mesh of retro and modern. On one hand, you have the far-out sight of a shifting liquid rainbow – a classic 1960s look. But it wouldn’t be possible without the use of GLSL shading. The animation is incredibly smooth and takes only 60 lines of JavaScript to achieve.
Pour Out Some Amazing Effects
It used to be that even attempting a liquid simulation was a questionable choice. The effects weren’t all that great and most users didn’t have enough horsepower to view them, anyway. That’s all changed in recent years.
You no longer need to rely on resource-hogging browser plugins to create something realistic. In fact, the solutions we have at our disposal are cross-browser and relatively lightweight. That gives you the freedom to experiment and let those liquid effects spill into your projects.