21+ CSS Liquid Animations

Last Updated on by in CSS Examples
Potion Liquid Animation

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

❤️ Checkout Popular CSS Collection

Digamber - Author positronX.io

Digamber, the founder of PositronX, is a certified web developer with over 10 years of experience. He possesses a curiosity for learning new things and enjoys playing cricket on his days off.