30+ CSS Liquid Effects - Free Code + Demos
Collection of 30+ CSS Liquid Effects. All items are 100% free and open-source.
1. Liquid Loader - Clean Code, Pastel Gradient
Author: Ana Tudor (thebabydino)
Links: Source Code / Demo
Created on: January 4, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: filter, animation, jade, css-variables
2. Liquid Loader - Inspired By Anna Tudor
Author: Amit Kumar (learningcreature)
Links: Source Code / Demo, Dribbble Shot
Created on: January 8, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
3. Liquid Button
Author: fliseno1k (fliseno1k)
Links: Source Code / Demo
Created on: December 17, 2019
Made with: HTML, CSS
4. Loading Liquid Animation
Author: Prathamesh Koshti (prathameshkoshti)
Links: Source Code / Demo
Created on: December 23, 2019
Made with: HTML, CSS
Tags: gooey, css-filter, filter, liquid, loading
5. Liquid Drop Using Gooey Effect
Author: Tushar Choudhari (tush23ar)
Links: Source Code / Demo
Created on: November 25, 2019
Made with: HTML, SCSS
6. Splatoon Styled Liquid Fill Buttons
Author: Mark (markmead)
Links: Source Code / Demo
Created on: September 3, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: splatoon nintendo, splatoon css, splatoon button, liquid fill effect, liquid button
7. Liquid Svg
Author: Chelsea Pattee (cpattee)
Links: Source Code / Demo
Created on: March 8, 2018
Made with: HTML, SCSS
8. Liquid Type
Creating a "wave" liquid effect on type using SVG mask.
Author: Callum Martin (Callum-Martin)
Links: Source Code / Demo
Created on: April 26, 2017
Made with: HTML, CSS
Tags: svg, wave, mask, liquid, first
9. Liquid Dripping - CSS Only
Inspiration from Cuberto https://dribbble.com/shots/3206606-Landing-page-wip Thanks Cuberto for this amazing concept.
Author: Paresh Deshpande (pareshd)
Links: Source Code / Demo, Dribbble Shot
Created on: January 13, 2017
Made with: HTML, SCSS, JS
Tags: liquid, drip, gooey, animation, filter
10. Radio Button Animatio
Author: Antoinette Janus (internette)
Links: Source Code / Demo, Dribbble Shot
Created on: February 4, 2016
Made with: HTML, SCSS
Tags: css, animation, radio, button
11. Liquid Loader
Author: Mikael Ainalem (ainalem)
Links: Source Code / Demo, Dribbble.com
Created on: January 1, 2020
Made with: HTML, CSS, JS
Tags: liquid, loader, gooey, jelly, blob
12. Bouncing Liquid Loader
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: December 3, 2015
Made with: HTML, SCSS
Tags: gooey, codecember, loader, liquid, svg-filter
13. Battery Charging Animation W/ Liquid
Author: Chris Holder (see8ch)
Links: Source Code / Demo
Created on: March 25, 2015
Made with: HTML, SCSS
Tags: sass, loading, animation, psuedo
14. Liquid Neon Buttons (CSS Fx)
(le JS sert juste à mettre le fond en noir quand on survole les boutons)
Author: Shay (Shay_Reichert)
Links: Source Code / Demo
Created on: May 11, 2020
Made with: HTML, SCSS
Tags: button, neon, liquid, fx, effect
15. Liquid Button
Author: Chris (christofer15)
Links: Source Code / Demo
Created on: August 3, 2019
Made with: HTML, CSS
Tags: button, liquid, animation
16. Liquid Type Effect [CSS Snippets]
thuviencss.com
Author: Ma Luong (maluong)
Links: Source Code / Demo
Created on: January 22, 2016
Made with: HTML, CSS
Tags: typography
17. Gooey Liquid CSS Effect
Author: Gostrafx (gostrafx)
Links: Source Code / Demo
Created on: August 8, 2019
Made with: HTML, CSS, JS
18. Liquid Colour Loader
Author: Chandrika Deb (chandrikadeb7)
Links: Source Code / Demo
Created on: June 24, 2020
Made with: HTML, CSS
Tags: loader, liquid, animation, color, codepenchallenge
19. Liquid Swipe
Tried to re-create cuberto liquid swipe, although not close yet. https://github.com/Cuberto/liquid-swipe Also if you want to learn about how to implement svg path animation logic you can checkout this pen https://codepen.io/mikel301292/pen/dMYRYZ. Note: - Not working is safari, svg clip...Read More
Author: Yugam (pizza3)
Links: Source Code / Demo
Created on: July 5, 2020
Made with: HTML, CSS, Babel
Tags: reactjs, svg, liquid, swipe, spring
20. Single Div Liquid Fill CSS Only
A single div liquid fill animation with CSS only - no images, SVG, or JavaScript. Can also be used to hide content until it fills up.
Author: Dave Quah (Milleus)
Links: Source Code / Demo
Created on: March 26, 2020
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: single-div, liquid, fill, scss, animation
21. Drop
inspired by https://dribbble.com/shots/7040455-Voice-visual-design-for-brand-CGI
Author: creme (creme)
Links: Source Code / Demo
Created on: September 5, 2019
Made with: SCSS, JS
Tags: drop, water, milk, liquid, css
22. Liquid Button
Liquid interaction button
Author: Yu-En W (yuenletsgo)
Links: Source Code / Demo
Created on: October 23, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: liquid, button, animation, ui
23. Gooey Lang Switch
2 language switcher using The Gooey (Liquid) Effect.
Author: thetarnav. (thetarnav)
Links: Source Code / Demo
Created on: July 7, 2019
Made with: HTML, SCSS, JS
Tags: liquid, gooey, lang, goo, animation
24. Liquid Button
Author: Ricardo Oliva Alonso (ricardoolivaalonso)
Links: Source Code / Demo
Created on: September 4, 2019
Made with: HTML, CSS
Tags: cpc-100x50, codepenchallenge, button, liquid
25. Liquid Radio Button
WIP Made for code challange from @st8rmi https://twitter.com/st8rmi/status/870568846498959360
Author: Tamino Martinius (Zaku)
Links: Source Code / Demo
Created on: June 2, 2017
Made with: HTML, SCSS
Tags: radio, button, liquid, css, animation
More Awesome Lists:
Share: