Skip to content

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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.

    Title:- Liquify Text SVG Filter
    Author:- Michael McMillan
    Made with:- HTML CSS JS

    Title:- liquid particle system
    Author:- Yuri akella Artiukh
    Made with:- HTML CSS JS

    Title:- Single Div Liquid Fill CSS only
    Author:- Dave Quah
    Made with:- HTML CSS JS

    Title:- gsap-science
    Author:- Louise Flanagan
    Made with:- HTML CSS JS

    Title:- Implementation of splitting loader
    Author:- Alex
    Made with:- HTML CSS JS

    Title:- Interactive Milk (Matter.js)
    Author:- Evan Jin (???)
    Made with:- HTML CSS JS

    Title:- Liquid Constellations Mouse Trail (vanilla JS)
    Author:- Frank
    Made with:- HTML CSS JS

    Title:- SVG chemistry flask animation
    Author:- agathaco
    Made with:- HTML CSS JS

    Title:- Liquid blend mode
    Author:- Alberto Jerez
    Made with:- HTML CSS JS

    Title:- 3D Glowing liquid in bottle
    Author:- SeraOne
    Made with:- HTML CSS JS

    Title:- Test tube
    Author:- Maria Marin
    Made with:- HTML CSS JS

    Title:- Weekly ‘Mation 5/52 – Bender Booze Up
    Author:- Sean
    Made with:- HTML CSS JS

    Title:- Liquid image
    Author:- Nick Watton
    Made with:- HTML CSS JS

    Title:- Bouncing Liquid Loader
    Author:- Fabio Ottaviani
    Made with:- HTML CSS JS

    Title:- Pure CSS liquid loader
    Author:- Ana Tudor
    Made with:- HTML CSS JS

    Title:- Coffee Machine Pure CSS Animation
    Author:- Henrique Rodrigues
    Made with:- HTML CSS JS

    Title:- Liquid Rainbow | GLSL
    Author:- Johan Karlsson
    Made with:- HTML CSS JS

    Title:- cocktail animation
    Author:- Vangel Tzo
    Made with:- HTML CSS JS

    Title:- Bubbles Bgs
    Author:- Julien Amblard
    Made with:- HTML CSS JS

    Title:- Spinning Liquid In Box Loader Doodle
    Author:- Alex Bergin
    Made with:- HTML CSS JS

    Title:- New Animated Logo for Scotch.io
    Author:- lmgonzalves
    Made with:- HTML CSS JS

    Title:- SVG Coffee Cup Fill
    Author:- alice
    Made with:- HTML CSS JS

    Title:- Liquid Hello
    Author:- Steve Gardner
    Made with:- HTML CSS JS

    Title:- orange
    Author:- Ana Tudor
    Made with:- HTML CSS JS

    Title:- Implementation of Liquid button
    Author:- Alex
    Made with:- HTML CSS JS

    Title:- Gooey Switch – Radio Button
    Author:- Gowri Prasanth V M
    Made with:- HTML CSS JS

    Title:- Liquid Gooey background
    Author:- Freelance Webexpert
    Made with:- HTML CSS JS

    Title:- Liquid Triangle – #CodePenChallenge
    Author:- Josh
    Made with:- HTML CSS JS

    Title:- Mardi Gras Falls
    Author:- Tiffany Rayside
    Made with:- HTML CSS JS

    Title:- Liquid (Chrome only)
    Author:- yuanchuan
    Made with:- HTML CSS JS

    Title:- Liquid drain
    Author:- Oscar Marcelo
    Made with:- HTML CSS JS

    Title:- SVG & CSS3 lab flask
    Author:- Joey Clouvel
    Made with:- HTML CSS JS

    Title:- Tubo de ensaio (test-tube)
    Author:- Ricardo Alves
    Made with:- HTML CSS JS

    Title:- CSS3 Animated Lab Beaker
    Author:- Jonathan Bidston
    Made with:- HTML CSS JS

    Title:- Coffee
    Author:- Jon
    Made with:- HTML CSS JS

    Title:- Liquid Transition Effect
    Author:- Aysenur Turk
    Made with:- HTML CSS JS

    Title:- Hyper Juice
    Author:- Luca Moser
    Made with:- HTML CSS JS

    Title:- Liquid Loader
    Author:- Onno
    Made with:- HTML CSS JS

    Title:- SVG Beer
    Author:- Lionel Tzatzkin
    Made with:- HTML CSS JS

    Title:- Liquid Loading
    Author:- Tim Pietrusky
    Made with:- HTML CSS JS

    Title:- CSS Animated Beer Pour (Forked from CSS Beaker Pen)
    Author:- Tim Ruby
    Made with:- HTML CSS JS

    <

    Title:- Liquid Swipe
    Author:- Yugam
    Made with:- HTML CSS JS

    Title:-Liquid Radio Button using SVG and GSAP (GreenSock)
    Author:-Ryan LaBar
    Made with:- HTML CSS JS

    Title:-Liquid Dripping – CSS Only
    Author:-Paresh Deshpande
    Made with:- HTML CSS JS

    Title:-Liquid Button
    Author:-fliseno1k
    Made with:- HTML CSS JS

    Title:-Liquid button
    Author:-Waaark
    Made with:- HTML CSS JS

    Title:-Smart Home Temperature Slider
    Author:-Chris Gannon
    Made with:- HTML CSS JS

    Title:-Low Poly Experiment
    Author:-Chris Gannon
    Made with:- HTML CSS JS

    Title:-Liquid button
    Author:-Tobias Reich
    Made with:- HTML CSS JS

    Title:-Liquid Button
    Author:-Andreas Storm
    Made with:- HTML CSS JS

    Title:-Liquid loader
    Author:-Mikael Ainalem
    Made with:- HTML CSS JS

    Title:-animation liquid effect
    Author:-rajeshdn
    Made with:- HTML CSS JS

    Title:-Liquid effect with CSS
    Author:-Douglas (Amarelo)
    Made with:- HTML CSS JS

    Title:-Drip
    Author:-whoacowboy
    Made with:- HTML CSS JS

    Title:-liquid effect
    Author:-Eugene Breslavskiy
    Made with:- HTML CSS JS

    Title:-Gooey Lang Switch
    Author:-thetarnav.
    Made with:- HTML CSS JS

    Title:-Liquid Interactive Text
    Author:-Frank
    Made with:- HTML CSS JS

    Title:-Liquid Type
    Author:-Callum Martin
    Made with:- HTML CSS JS

    Title:-Liquid Tab bar animation
    Author:-Aaron Iker
    Made with:- HTML CSS JS

    Title:-Liquid Grid
    Author:-Kevin Levron
    Made with:- HTML CSS JS

    Title:-Liquid UI Elements
    Author:-Aaron Iker
    Made with:- HTML CSS JS

    Title:-CSS Little Witch
    Author:-agathaco
    Made with:- HTML CSS JS