Welcome to our site if you want to emulate the behavior of liquid elements in your web pages. You’re in the right spot. In this compilation, we are thrilled to showcase the best collection of CSS liquid animations. These free HTML and CSS liquid animation code examples have been gathered from Codepen and GitHub.
You can use these examples to add liquid-type animations to your webpage. These animations mimic fluid-like movements, such as the flow or ripple effect of liquid, and give a smooth and organic appearance to the elements on the webpage.
Liquid animation has been in trend due to its popularity in UI development, providing organic, rich, fluid visual experiences. CSS liquid animations allow adding dynamic experiences to websites or UI components. All the liquid animation effects that we are showcasing here are extremely lightweight, highly customizable, and anybody can customize these liquid effects with basic knowledge of HTML and CSS 3.
We have covered all types of CSS animation effects that allow you to add a high level of interactivity to make your web project look more appealing, dynamic, elegant and highly creative. With our diverse range of liquid animations like liquid dripping effect, animated bounce loader, liquid checkbox, liquid loaders, liquid loader, radio button you can uplift visual appeal of your website.
01. Loading Liquid Animation
See the Pen
Loading Liquid Animation by Prathamesh Koshti (@prathameshkoshti)
on CodePen.
Author: Prathamesh Koshti @prathameshkoshti
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, CSS
02. Liquid Dripping – CSS Only
See the Pen
Liquid Dripping – CSS Only by Paresh Deshpande (@pareshd)
on CodePen.
Author: Paresh Deshpande, @pareshd
Links: Source Code / Demo
Created on: January 13, 2017
Made with: HTML, CSS
03. Liquid SVG
See the Pen
liquid svg by Chelsea Pattee (@cpattee)
on CodePen.
Author: Chelsea Pattee @cpattee
Links: Source Code / Demo
Created on: March 08, 2018
Made with: HTML, CSS
04. Liquid Loader
See the Pen
Liquid loader by Mikael Ainalem (@ainalem)
on CodePen.
Author: Mikael Ainalem @ainalem
Links: Source Code / Demo
Created on: January 01, 2020
Made with: HTML, CSS
05. Liquid Loader
See the Pen
Liquid Loader by Onno (@Penno)
on CodePen.
Author: Onno @Penno
Links: Source Code / Demo
Created on: December 18, 2015
Made with: HTML, CSS
06. Liquid Loader – Clean Code, Pastel Gradient
See the Pen
Liquid Loader – Inspired by Ana Tudor by Amit Kumar (@learningcreature)
on CodePen.
Author: Amit Kumar @learningcreature
Links: Source Code / Demo
Created on: January 08, 2020
Made with: HTML, CSS
07. Liquid Animation
See the Pen
Liquid Animation by Thomas RONCIN (@Spate)
on CodePen.
Author: Thomas RONCIN @Spate
Links: Source Code / Demo
Created on: January 19, 2022
Made with: HTML, CSS
08. Liquid Type
See the Pen
Liquid Type by Callum Martin (@Callum-Martin)
on CodePen.
Author: Callum Martin @Callum-Martin
Links: Source Code / Demo
Created on: April 27, 2017
Made with: HTML, CSS
09. Radio Button Animation
See the Pen
Radio Button Animatio by Antoinette Janus (@internette)
on CodePen.
Author: Antoinette Janus @internette
Links: Source Code / Demo
Created on: February 05, 2016
Made with: HTML, CSS, SCSS
10. Liquid Drop Using Gooey Effect
See the Pen
Drop : Gooey Effect by Tushar Choudhari (@ctushr)
on CodePen.
Author: Tushar Choudhari @ctushr
Links: Source Code / Demo
Created on: November 25, 2019
Made with: HTML, CSS, SCSS
11. Splatoon Styled Liquid Fill Buttons
See the Pen
Splatoon Styled Liquid Fill Buttons by Mark Mead (@markmead)
on CodePen.
Author: Mark Mead @markmead
Links: Source Code / Demo
Created on: September 03, 2018
Made with: HTML, CSS, SCSS
12. Bouncing Liquid Loader
See the Pen
Bouncing Liquid Loader by Fabio Ottaviani (@supah)
on CodePen.
Author: Fabio Ottaviani @supah
Links: Source Code / Demo
Created on: December 04, 2015
Made with: HTML, CSS, SCSS
13. States of Matter – Liquid
See the Pen
States of Matter – Liquid by Josetxu (@josetxu)
on CodePen.
Author: Josetxu @josetxu
Links: Source Code / Demo
Created on: January 12, 2021
Made with: HTML, CSS
14. Liquid Button
See the Pen
Liquid Button by fliseno1k (@fliseno1k)
on CodePen.
Author: fliseno1k @fliseno1k
Links: Source Code / Demo
Created on: December 17, 2019
Made with: HTML, CSS
15. Battery Charging Animation with Liquid
See the Pen
Battery Charging Animation w/ Liquid by Chris Holder (@see8ch)
on CodePen.
Author: Chris Holder @see8ch
Links: Source Code / Demo
Created on: March 25, 2015
Made with: HTML, CSS, SCSS
16. Single Div Liquid Fill CSS only
See the Pen
Single Div Liquid Fill CSS only by Dave Quah (@Milleus)
on CodePen.
Author: Dave Quah @Milleus
Links: Source Code / Demo
Created on: March 26, 2020
Made with: HTML, CSS, SCSS
17. Liquid Loader
See the Pen
Liquid Loader by Florian Kleber (@kleberbaum-the-sasster)
on CodePen.
Author: Florian Kleber @kleberbaum-the-sasster
Links: Source Code / Demo
Created on: March 19, 2021
Made with: HTML, CSS
18. Drop
See the Pen
Drop by Shaina (@shailaO07)
on CodePen.
Author: Shaina @shailaO07
Links: Source Code / Demo
Created on: January 12, 2021
Made with: HTML, CSS
19. Liquid Loader
See the Pen
Liquid Loader ???? by Stob (@stob208)
on CodePen.
Author: Stob @stob208
Links: Source Code / Demo
Created on: January 17, 2021
Made with: HTML, CSS
20. Potion Liquid Animation
See the Pen
Potion liquid animation by Juani Gallo (@juanigallo)
on CodePen.
Author: Juani Gallo @juanigallo
Links: Source Code / Demo
Created on: December 30, 2019
Made with: HTML, CSS, SCSS
21. Liquid Animation
See the Pen
liquid animation by Patrick Hempel (@patrickhempel)
on CodePen.
Author: Patrick Hempel @patrickhempel
Links: Source Code / Demo
Created on: June 6, 2019
Made with: HTML, CSS