40+ Best CSS Liquid / Water Effects Codepen Collection
You will find the most amazing collection of css liquid effects from codepen in this post. You can learn how to create liquid type of effects, how to animate it and even how to make your own awesome background.
1. Liquify Text SVG Filter by Michael McMillan
Author: Michael McMillan
Links: Source Code / Demo
Made with: HTML CSS
2. Liquid particle system by Yuri Akella Artiukh
Author: Yuri Akella Artiukh
Links: Source Code / Demo
Made with: HTML CSS
3. Single Div Liquid Fill CSS only by Dave Quah
Author: Dave Quah
Links: Source Code / Demo
Made with: HTML CSS
4. gsap-science by Louise Flanagan
Author: Louise Flanagan
Links: Source Code / Demo
Made with: HTML CSS
5. Implementation of splitting loader by Alex
Author: Alex
Links: Source Code / Demo
Made with: HTML CSS
6. Interactive Milk (Matter.js) by Evan Jin (???)
Author: Evan Jin (???)
Links: Source Code / Demo
Made with: HTML CSS
7. Liquid Constellations Mouse Trail (vanilla JS) by Frank
Author: Frank
Links: Source Code / Demo
Made with: HTML CSS
8. SVG chemistry flask animation by agathaco
Author: agathaco
Links: Source Code / Demo
Made with: HTML CSS
9. Liquid blend mode by Alberto Jerez
Author: Alberto Jerez
Links: Source Code / Demo
Made with: HTML CSS
10. 3D Glowing liquid in bottle by SeraOne
Author: SeraOne
Links: Source Code / Demo
Made with: HTML CSS
11. Test tube by Maria Marin
Author: Maria Marin
Links: Source Code / Demo
Made with: HTML CSS
12. Weekly ‘Mation 5/52 – Bender Booze Up by Sean
Author: Sean
Links: Source Code / Demo
Made with: HTML CSS
13. Liquid image by Nick Watton
Author: Nick Watton
Links: Source Code / Demo
Made with: HTML CSS
14. Bouncing Liquid Loader by Fabio Ottaviani
Author: Fabio Ottaviani
Links: Source Code / Demo
Made with: HTML CSS
15. Pure CSS liquid loader by Ana Tudor
Author: Ana Tudor
Links: Source Code / Demo
Made with: HTML CSS
16. Coffee Machine Pure CSS Animation by Henrique Rodrigues
Author: Henrique Rodrigues
Links: Source Code / Demo
Made with: HTML CSS
17. Liquid Rainbow by Johan Karlsson
Author: Johan Karlsson
Links: Source Code / Demo
Made with: HTML CSS
18. cocktail animation by Vangel Tzo
Author: Vangel Tzo
Links: Source Code / Demo
Made with: HTML CSS
19. Bubbles Bgs by Julien Amblard
Author: Julien Amblard
Links: Source Code / Demo
Made with: HTML CSS
20. Spinning Liquid In Box Loader Doodle by Alex Bergin
Author: Alex Bergin
Links: Source Code / Demo
Made with: HTML CSS
21. New Animated Logo for Scotch.io by lmgonzalves
Author: lmgonzalves
Links: Source Code / Demo
Made with: HTML CSS
22. SVG Coffee Cup Fill by alice
Author: alice
Links: Source Code / Demo
Made with: HTML CSS
23. Liquid Hello by Steve Gardner
Author: Steve Gardner
Links: Source Code / Demo
Made with: HTML CSS
24. orange by Ana Tudor
Author: Ana Tudor
Links: Source Code / Demo
Made with: HTML CSS
25. Implementation of Liquid button by Alex
Author: Alex
Links: Source Code / Demo
Made with: HTML CSS
26. Gooey Switch – Radio Button by Gowri Prasanth V M
Author: Gowri Prasanth V M
Links: Source Code / Demo
Made with: HTML CSS
27. Liquid Gooey background by Freelance Webexpert
Author: Freelance Webexpert
Links: Source Code / Demo
Made with: HTML CSS
28. Liquid Triangle – #CodePenChallenge by Josh
Author: Josh
Links: Source Code / Demo
Made with: HTML CSS
29. Mardi Gras Falls by Tiffany Rayside
Author: Tiffany Rayside
Links: Source Code / Demo
Made with: HTML CSS
30. Liquid (Chrome only) by yuanchuan
Author: yuanchuan
Links: Source Code / Demo
Made with: HTML CSS
31. Liquid drain by Oscar Marcelo
Author: Oscar Marcelo
Links: Source Code / Demo
Made with: HTML CSS
32. SVG & CSS3 lab flask by Joey Clouvel
Author: Joey Clouvel
Links: Source Code / Demo
Made with: HTML CSS
33. Tubo de ensaio (test-tube) by Ricardo Alves
Author: Ricardo Alves
Links: Source Code / Demo
Made with: HTML CSS
34. CSS3 Animated Lab Beaker by Jonathan Bidston
Author: Jonathan Bidston
Links: Source Code / Demo
Made with: HTML CSS
35. Coffee by Jon
Author: Jon
Links: Source Code / Demo
Made with: HTML CSS
36. Liquid Transition Effect by Aysenur Turk
Author: Aysenur Turk
Links: Source Code / Demo
Made with: HTML CSS
37. Hyper Juice by Luca Moser
Author: Luca Moser
Links: Source Code / Demo
Made with: HTML CSS
38. Liquid Loader by Onno
Author: Onno
Links: Source Code / Demo
Made with: HTML CSS
39. SVG Beer by Lionel Tzatzkin
Author: Lionel Tzatzkin
Links: Source Code / Demo
Made with: HTML CSS
40. Liquid Loading by Tim Pietrusky
Author: Tim Pietrusky
Links: Source Code / Demo
Made with: HTML CSS
41. CSS Animated Beer Pour (Forked from CSS Beaker Pen) by Tim Ruby
Author: Tim Ruby
Links: Source Code / Demo
Made with: HTML CSS
42. Liquid Swipe by Yugam
Author: Yugam
Links: Source Code / Demo
Made with: HTML CSS
43. Liquid Radio Button using SVG and GSAP (GreenSock) by Ryan LaBar
Author: Ryan LaBar
Links: Source Code / Demo
Made with: HTML CSS
44. Liquid Dripping – CSS Only by Paresh Deshpande
Author: Paresh Deshpande
Links: Source Code / Demo
Made with: HTML CSS
45. Liquid Button by fliseno1k
Author: fliseno1k
Links: Source Code / Demo
Made with: HTML CSS
46. Liquid button by Waaark
Author: Waaark
Links: Source Code / Demo
Made with: HTML CSS
47. Smart Home Temperature Slider by Chris Gannon
Author: Chris Gannon
Links: Source Code / Demo
Made with: HTML CSS
48. Low Poly Experiment by Chris Gannon
Author: Chris Gannon
Links: Source Code / Demo
Made with: HTML CSS
49. Liquid button by Tobias Reich
Author: Tobias Reich
Links: Source Code / Demo
Made with: HTML CSS
50. Liquid Button by Andreas Storm
Author: Andreas Storm
Links: Source Code / Demo
Made with: HTML CSS
51. Liquid loader by Mikael Ainalem
Author: Mikael Ainalem
Links: Source Code / Demo
Made with: HTML CSS
52. animation liquid effect by rajeshdn
Author: rajeshdn
Links: Source Code / Demo
Made with: HTML CSS
53. Liquid effect with CSS by Douglas (Amarelo)
Author: Douglas (Amarelo)
Links: Source Code / Demo
Made with: HTML CSS
54. Drip by whoacowboy
Author: whoacowboy
Links: Source Code / Demo
Made with: HTML CSS
55. liquid effect by Eugene Breslavskiy
Author: Eugene Breslavskiy
Links: Source Code / Demo
Made with: HTML CSS
56. Gooey Lang Switch by thetarnav.
Author: thetarnav.
Links: Source Code / Demo
Made with: HTML CSS
57. Liquid Interactive Text by Frank
Author: Frank
Links: Source Code / Demo
Made with: HTML CSS
58. Liquid Type by Callum Martin
Author: Callum Martin
Links: Source Code / Demo
Made with: HTML CSS
59. Liquid Tab bar animation by Aaron Iker
Author: Aaron Iker
Links: Source Code / Demo
Made with: HTML CSS
60. Liquid Grid by Kevin Levron
Author: Kevin Levron
Links: Source Code / Demo
Made with: HTML CSS
61. Liquid UI Elements by Aaron Iker
Author: Aaron Iker
Links: Source Code / Demo
Made with: HTML CSS
62. CSS Little Witch by agathaco
Author: agathaco
Links: Source Code / Demo
Made with: HTML CSS
