30+ CSS Liquid Effects

CSS liquid effects are dynamic web design techniques that resemble liquid or fluid substances, such as oil, water, or mercury. It is primarily used by web developers to add a touch of dynamism to web pages. As a result, it improves the visual appeal and adds interactivity to web projects.

In this collection, we are showcasing 30+ HTML and CSS liquid effects examples. Our compilation features stunning liquid-effect designs that help you create eye-catching websites that attract your audience.

We have sourced these CSS liquid effects code examples from reliable platforms like CodePen and GitHub. So, without further ado, Let’s explore these 100% free, stunning CSS liquid effect code examples.

1. Liquid drain

See the Pen <a href="https://codepen.io/oscarmarcelo/pen/ZOYMKG"> Liquid drain</a> by Oscar Marcelo (<a href="https://codepen.io/oscarmarcelo">@oscarmarcelo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oscar Marcelo
Source: Code / Demo
Created on: JUNE 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass)

2. Liquid effect. Build with JS.

See the Pen <a href="https://codepen.io/yangfan44777/pen/kMrNaP"> Liquid effect. Build with JS. </a> by yangfan (<a href="https://codepen.io/yangfan44777">@yangfan44777</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: yangfan
Source: Code / Demo
Created on: SEPTEMBER 4, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. SVG & Canvas Liquid Effect

See the Pen <a href="https://codepen.io/dehnavi/pen/ZOBPgW"> SVG & Canvas Liquid Effect</a> by Dehnavi (<a href="https://codepen.io/dehnavi">@dehnavi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dehnavi
Source: Code / Demo
Created on: JUNE 23, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Low Poly Experiment

See the Pen <a href="https://codepen.io/chrisgannon/pen/WNNJqXz"> Low Poly Experiment</a> by Chris Gannon (<a href="https://codepen.io/chrisgannon">@chrisgannon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Gannon
Source: Code / Demo
Created on: NOVEMBER 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. Liquid Loader – Clean Code, Pastel Gradient

See the Pen <a href="https://codepen.io/learningcreature/pen/gObvzmL"> Liquid Loader – Inspired by Ana Tudor</a> by Amit Kumar (<a href="https://codepen.io/learningcreature">@learningcreature</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amit Kumar
Source: Code / Demo
Created on: JANUARY 08, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. States of Matter – Liquid

See the Pen <a href="https://codepen.io/josetxu/pen/vYXzoOz"> States of Matter – Liquid</a> by Josetxu (<a href="https://codepen.io/josetxu">@josetxu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Josetxu
Source: Code / Demo
Created on: JANUARY 12, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Single Div Liquid Fill CSS only

See the Pen <a href="https://codepen.io/Milleus/pen/poJQPOO"> Single Div Liquid Fill CSS only</a> by Dave Quah (<a href="https://codepen.io/Milleus">@Milleus</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dave Quah
Source: Code / Demo
Created on: MARCH 26, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

8. Liquid Button

See the Pen <a href="https://codepen.io/yuenletsgo/pen/LYYWmBe"> Liquid Button</a> by Yu-En W (<a href="https://codepen.io/yuenletsgo">@yuenletsgo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yu-En W
Source: Code / Demo
Created on: OCTOBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript

9. Drop : Gooey Effect

See the Pen <a href="https://codepen.io/ctushr/pen/xxxNYbP"> Drop : Gooey Effect</a> by Tushar Choudhari (<a href="https://codepen.io/ctushr">@ctushr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tushar Choudhari
Source: Code / Demo
Created on: NOVEMBER 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

10. Liquid Animation

See the Pen <a href="https://codepen.io/Spate/pen/gOGJMgG"> Liquid Animation</a> by Thomas RONCIN (<a href="https://codepen.io/Spate">@Spate</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thomas RONCIN
Source: Code / Demo
Created on: JANUARY 19, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Liquid Loader

See the Pen <a href="https://codepen.io/kleberbaum-the-sasster/pen/qBqzVBJ"> Liquid Loader</a> by Florian Kleber (<a href="https://codepen.io/kleberbaum-the-sasster">@kleberbaum-the-sasster</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Florian Kleber
Source: Code / Demo
Created on: MARCH 19, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Loading Liquid Animation

See the Pen <a href="https://codepen.io/prathameshkoshti/pen/MWYmzeM"> Loading Liquid Animation</a> by Prathamesh Koshti (<a href="https://codepen.io/prathameshkoshti">@prathameshkoshti</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Prathamesh Koshti
Source: Code / Demo
Created on: DECEMBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Liquid Neon Buttons (CSS fx)

See the Pen <a href="https://codepen.io/Shay_Reichert/pen/ExVRVbx"> Liquid Neon Buttons (CSS fx)</a> by Shay (<a href="https://codepen.io/Shay_Reichert">@Shay_Reichert</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shay
Source: Code / Demo
Created on: MAY 11, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Splatoon Styled Liquid Fill Buttons

See the Pen <a href="https://codepen.io/markmead/pen/mGmqrJ"> Splatoon Styled Liquid Fill Buttons</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: SEPTEMBER 3, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

15. Battery Charging Animation w/ Liquid

See the Pen <a href="https://codepen.io/see8ch/pen/ZYwvGJ"> Battery Charging Animation w/ Liquid</a> by Chris Holder (<a href="https://codepen.io/see8ch">@see8ch</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Holder
Source: Code / Demo
Created on: MARCH 25, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

16. Liquid Button

See the Pen <a href="https://codepen.io/fliseno1k/pen/WNboLBy"> Liquid Button</a> by fliseno1k (<a href="https://codepen.io/fliseno1k">@fliseno1k</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: fliseno1k
Source: Code / Demo
Created on: DECEMBER 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Liquid button

See the Pen <a href="https://codepen.io/christofer15/pen/VoMxZj"> Liquid button</a> by Chris (<a href="https://codepen.io/christofer15">@christofer15</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris
Source: Code / Demo
Created on: AUGUST 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. liquid svg

See the Pen <a href="https://codepen.io/cpattee/pen/LdPJJN"> liquid svg</a> by Chelsea Pattee (<a href="https://codepen.io/cpattee">@cpattee</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chelsea Pattee
Source: Code / Demo
Created on: MARCH 8, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

19. Liquid type effect [CSS Snippets]

See the Pen <a href="https://codepen.io/maluong/pen/JGpovP"> Liquid type effect [CSS Snippets]</a> by Ma Luong (<a href="https://codepen.io/maluong">@maluong</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ma Luong
Source: Code / Demo
Created on: JANUARY 22, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Liquid Type

See the Pen <a href="https://codepen.io/Callum-Martin/pen/aWpdGw"> Liquid Type</a> by Callum Martin (<a href="https://codepen.io/Callum-Martin">@Callum-Martin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Callum Martin
Source: Code / Demo
Created on: APRIL 27, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Liquid loader

See the Pen <a href="https://codepen.io/ainalem/pen/eYmGLyp"> Liquid loader</a> by Mikael Ainalem (<a href="https://codepen.io/ainalem">@ainalem</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikael Ainalem
Source: Code / Demo
Created on: JANUARY 1, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Bouncing Liquid Loader

See the Pen <a href="https://codepen.io/supah/pen/QyWwNd"> Bouncing Liquid Loader</a> by Fabio Ottaviani (<a href="https://codepen.io/supah">@supah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fabio Ottaviani
Source: Code / Demo
Created on: DECEMBER 4, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Gooey liquid CSS effect

See the Pen <a href="https://codepen.io/gostrafx/pen/NQMdpo"> Gooey liquid CSS effect</a> by Gostrafx (<a href="https://codepen.io/gostrafx">@gostrafx</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gostrafx
Source: Code / Demo
Created on: AUGUST 9, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Liquid Dripping – CSS Only

See the Pen <a href="https://codepen.io/pareshd/pen/xgOEQb"> Liquid Dripping – CSS Only</a> by Paresh Deshpande (<a href="https://codepen.io/pareshd">@pareshd</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paresh Deshpande
Source: Code / Demo
Created on: JANUARY 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

25. Potion Liquid Animation

See the Pen <a href="https://codepen.io/juanigallo/pen/XWJeWyr"> Potion liquid animation</a> by Juani Gallo (<a href="https://codepen.io/juanigallo">@juanigallo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Juani Gallo
Source: Code / Demo
Created on: DECEMBER 30, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Liquid Colour Loader

See the Pen <a href="https://codepen.io/chandrikadeb7/pen/eYJRZXw"> Liquid Colour Loader</a> by Chandrika Deb (<a href="https://codepen.io/chandrikadeb7">@chandrikadeb7</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chandrika Deb
Source: Code / Demo
Created on: JUNE 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

27. Radio Button Animation

See the Pen <a href="https://codepen.io/internette/pen/BjOMWa"> Radio Button Animatio</a> by Antoinette Janus (<a href="https://codepen.io/internette">@internette</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antoinette Janus
Source: Code / Demo
Created on: FEBRUARY 5, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Liquid Animation

See the Pen <a href="https://codepen.io/patrickhempel/pen/vwwPzQ"> liquid animation</a> by Patrick Hempel (<a href="https://codepen.io/patrickhempel">@patrickhempel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Patrick Hempel
Source: Code / Demo
Created on: JUNE 6, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Liquid Loader

See the Pen <a href="https://codepen.io/Penno/pen/mVPqdb"> Liquid Loader</a> by Onno (<a href="https://codepen.io/Penno">@Penno</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Onno
Source: Code / Demo
Created on: DECEMBER 18, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

30. Drop

See the Pen <a href="https://codepen.io/creme/pen/mdbpJWN"> Drop</a> by creme (<a href="https://codepen.io/creme">@creme</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: creme
Source: Code / Demo
Created on: SEPTEMBER 5, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

31. Liquid Swipe

See the Pen <a href="https://codepen.io/pizza3/pen/LYGQOBo"> Liquid Swipe</a> by Yugam (<a href="https://codepen.io/pizza3">@pizza3</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yugam
Source: Code / Demo
Created on: FEBRUARY 28, 2028
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS