20+ Awesome CSS Water Effects (Free Code + Demos)
Enjoy this 100% free and open source collection of HTML and CSS water and waves effect code examples. These will look awesome on your website.
1. Drip Drop Animation
Water dripping and dropping. Using bezier curve to get the correct speed
Author: Adib Behjat (abehjat)
Links: Source Code / Demo
Created on: July 17, 2015
Made with: HTML, CSS
Tags: drop, drip, water, droplet, ripple
2. Simple CSS Waves | Mobile & Full Width
Lightweight animation between header & content. Easy to customize and apply into any website! Works with all devices and screen sizes.
Author: Goodkatz (goodkatz)
Links: Source Code / Demo
Created on: August 13, 2019
Made with: HTML, CSS
Tags: header, animation, wave, gradient
3. Pure CSS Rain
This Pen is based on an awesome animation from Dribbble by Eddie Song https://dribbble.com/shots/3298162-slomo- raindrops. I chose this template because of the fast-falling raindrops and the slowly emerging ripples.
Author: Yannick Brandt (Coderesting)
Links: Source Code / Demo, Dribbble.com
Created on: October 29, 2019
Made with: HTML, CSS
Tags: cpc-fast-slow, codepenchallenge
4. Pure CSS Random Rain W/ SVG + CSS Variables ☔️🦆
Wanted to create some rain for another pen. I tried with just CSS but the shape didn't feel right. Using randomly generated CSS variables cuts down the CSS and gives droplets random positioning and animation properties. Enjoy!
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: May 29, 2018
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: rain, svg, animation, codepenchallenge, cpc-water
5. CSS Waves Effect
This is my first time using SVG and an early step in CSS animation. Thought that challenge was a good excuse to try something simple. The animation isn't so smooth, but I didn't spent too much time fine tuning it.
Author: Nicholas Gratton (ngratton)
Links: Source Code / Demo
Created on: December 13, 2018
Made with: HTML, CSS, JS
Tags: cpc-water, codepenchallenge
6. Water Droplets On Window CSS
Focusing effect on either first translucent layer or the layer behind.
Author: Jérôme Beau (Javarome)
Links: Source Code / Demo
Created on: February 14, 2015
Made with: HTML, SCSS
Tags: pure-css, transparency, animation, blur
7. CSS Water Drop
Ripple animation because it's more fun than my day job.
Author: Jaron White (jaronwhite)
Links: Source Code / Demo
Created on: February 5, 2016
Made with: HTML, CSS
Tags: water, drop, animation, css, ripple
8. CSS Text Filling With Water
A text filling with water animation, for preloaders and such.
Author: Lucas Bebber (lbebber)
Links: Source Code / Demo
Created on: November 11, 2013
Made with: HTML, SCSS
Tags: css, water, liquid, typography, loading
9. Water Animation
Author: Jan Willem Henckel (farly)
Links: Source Code / Demo
Created on: August 21, 2015
Made with: HTML, SCSS
10. Water-Ripple-Animation-ripples
Author: MAHESH AMBURE (maheshambure21)
Links: Source Code / Demo
Created on: September 26, 2017
Made with: HTML, CSS, JS
Tags: water-ripple-animation-ripples, water animation
11. CSS Ripple Effect
Author: Anthony DAlessio (daless14)
Links: Source Code / Demo
Created on: July 20, 2013
Made with: HTML, CSS
Tags: css, ripple, gradient, animation
12. Cool Text Animation | Water Animation Using Only HTML & CSS
Author: Aleksandr (avkuznetsov54)
Links: Source Code / Demo
Created on: November 17, 2018
Made with: HTML, Sass
13. Octocat Sprite Swimming In The Ocean With CSS
This is a simple animation of Github's logo, Octocat, swimming in the ocean to show how to animate sprites with CSS. Checkout the full article here https://codinhood.com/micro/animate-octocat-sprite-css
Author: Cody Pearce (codypearce)
Links: Source Code / Demo
Created on: January 29, 2020
Made with: HTML, CSS
Tags: octocat, sprites, css-sprites, css-animation, ocean
14. Cup Filling With Water CSS Animation
Author: JustSaas (JustSaas)
Links: Source Code / Demo
Created on: February 1, 2018
Made with: HTML, CSS
15. Water Drop Circle Effect As CSS3 Animation
Great for profile pictures or flat buttons! Can be used with any image - image doesn't have to be round.
Author: Jascha Goltermann (jascha)
Links: Source Code / Demo
Created on: June 17, 2014
Made with: HTML, CSS, JS
Tags: circle, stripes, round, flat, css3
16. CSS Wave Animation
Author: akshit kanolkar (akshitkanolkar)
Links: Source Code / Demo
Created on: November 18, 2018
Made with: HTML, CSS
Tags: cssanimation, waveanimation, animation, wave, ocean
17. 1 Meter Swell
Ocean wave animation using SVG and CSS.
Author: Darin Reid (elcontraption)
Links: Source Code / Demo
Created on: June 28, 2018
Made with: HTML, CSS
Tags: wave, svg, css, ocean, animation
18. CSS Wave Animation With A .png
There was talk on our internal chat ( https://chat.vanila.io) about how https://itmeo.com/ have beautiful animation, and a member asked if someone can hack it. :) So I decide to examine their code and make just animation snippet code out of it.
Author: Jelena Jovanovic (plavookac)
Links: Source Code / Demo
Created on: July 25, 2017
Made with: HTML, CSS
Tags: css, animation, css-animation, wave animation, wave animation css
More Awesome Lists:
Share: