CSS Liquid / Water Effects

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