Collection of free CSS liquid effect code examples from Codepen, GitHub and other resources. Update of April 2021 collection. 7 new items.

Author

  • Thomas RONCIN

Links

Made with

  • HTML / CSS

About a code

Liquid Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Florian Kleber

Links

Made with

  • HTML / CSS

About a code

Liquid Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Stob

Links

Made with

  • HTML / CSS

About a code

Liquid Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Josetxu

Links

Made with

  • HTML / CSS

About a code

States of Matter - Liquid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Shaina

Links

Made with

  • HTML / CSS (SCSS)

About a code

Drop

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Dave Quah

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Single Div Liquid Fill CSS Only

A single div liquid fill animation with CSS only - no images, SVG, or JavaScript.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Amit Kumar

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Liquid Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mikael Ainalem

Links

Made with

  • HTML / CSS

About a code

Liquid Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Juani Gallo

Links

Made with

  • HTML / CSS (SCSS)

About a code

Potion Liquid Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • fliseno1k

Links

Made with

  • HTML / CSS

About a code

Liquid Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Prathamesh Koshti

Links

Made with

  • HTML / CSS

About a code

Loading Liquid Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Tushar Choudhari

Links

Made with

  • HTML / CSS (SCSS)

About a code

Liquid Drop Using Gooey Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Patrick Hempel

Links

Made with

  • HTML / CSS

About a code

Liquid Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mark

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Splatoon Styled Liquid Fill Buttons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Chelsea Pattee

Links

Made with

  • HTML / CSS (SCSS)

About a code

Liquid SVG

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jason

Links

Made with

  • HTML / CSS

About a code

Button Hover Liquid Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Callum Martin

Links

Made with

  • HTML / CSS

About a code

Liquid Type

Creating a "wave" liquid effect on type using SVG mask.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Paresh Deshpande

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Only Liquid Dripping Effect

Can be used as a background and multiple layers of liquid can be created.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Antoinette Janus

Links

Made with

  • HTML / CSS (SCSS)

About a code

Radio Button Animation

Liquid checkbox/radio button in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Onno

Links

Made with

  • HTML / CSS

About a code

Liquid Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Fabio Ottaviani

Links

Made with

  • HTML / CSS (SCSS)

About a code

Bouncing Liquid Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Chris Holder

Links

Made with

  • HTML / CSS (SCSS)

About a code

Battery Charging Animation With Liquid

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -