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

CSS Water Effects - Drip Drop Animation
Water dripping and dropping. Using bezier curve to get the correct speed
Author: Adib Behjat (abehjat)
Created on: July 17, 2015
Made with: HTML, CSS
Tags: drop, drip, water, droplet, ripple

2. Simple CSS Waves | Mobile & Full Width

CSS Water Effects - 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)
Created on: August 13, 2019
Made with: HTML, CSS
Tags: header, animation, wave, gradient

3. Pure CSS Rain

CSS Water Effects - 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)
Created on: October 29, 2019
Made with: HTML, CSS
Tags: cpc-fast-slow, codepenchallenge

4. Pure CSS Random Rain W/ SVG + CSS Variables ☔️🦆

CSS Water Effects - 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)
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

CSS Water Effects - 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)
Created on: December 13, 2018
Made with: HTML, CSS, JS
Tags: cpc-water, codepenchallenge

6. Water Droplets On Window CSS

CSS Water Effects - Water Droplets On Window CSS
Focusing effect on either first translucent layer or the layer behind.
Author: Jérôme Beau (Javarome)
Created on: February 14, 2015
Made with: HTML, SCSS
Tags: pure-css, transparency, animation, blur

7. CSS Water Drop

CSS Water Effects - CSS Water Drop
Ripple animation because it's more fun than my day job.
Author: Jaron White (jaronwhite)
Created on: February 5, 2016
Made with: HTML, CSS
Tags: water, drop, animation, css, ripple

8. CSS Text Filling With Water

CSS Water Effects - CSS Text filling with water
A text filling with water animation, for preloaders and such.
Author: Lucas Bebber (lbebber)
Created on: November 11, 2013
Made with: HTML, SCSS
Tags: css, water, liquid, typography, loading

9. Water Animation

CSS Water Effects - Water Animation
Author: Jan Willem Henckel (farly)
Created on: August 21, 2015
Made with: HTML, SCSS

10. Water-Ripple-Animation-ripples

CSS Water Effects - Water-Ripple-Animation-ripples
Author: MAHESH AMBURE (maheshambure21)
Created on: September 26, 2017
Made with: HTML, CSS, JS
Tags: water-ripple-animation-ripples, water animation

11. CSS Ripple Effect

CSS Water Effects - CSS ripple effect
Author: Anthony DAlessio (daless14)
Created on: July 20, 2013
Made with: HTML, CSS
Tags: css, ripple, gradient, animation

12. Cool Text Animation | Water Animation Using Only HTML & CSS

CSS Water Effects - Cool Text Animation | Water Animation Using Only HTML & CSS
Author: Aleksandr (avkuznetsov54)
Created on: November 17, 2018
Made with: HTML, Sass

13. Octocat Sprite Swimming In The Ocean With CSS

CSS Water Effects - 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)
Created on: January 29, 2020
Made with: HTML, CSS
Tags: octocat, sprites, css-sprites, css-animation, ocean

14. Cup Filling With Water CSS Animation

CSS Water Effects - Cup filling with Water CSS Animation
Author: JustSaas (JustSaas)
Created on: February 1, 2018
Made with: HTML, CSS

15. Water Drop Circle Effect As CSS3 Animation

CSS Water Effects - 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)
Created on: June 17, 2014
Made with: HTML, CSS, JS
Tags: circle, stripes, round, flat, css3

16. CSS Wave Animation

CSS Water Effects - CSS Wave Animation
Author: akshit kanolkar (akshitkanolkar)
Created on: November 18, 2018
Made with: HTML, CSS
Tags: cssanimation, waveanimation, animation, wave, ocean

17. 1 Meter Swell

CSS Water Effects - 1 meter swell
Ocean wave animation using SVG and CSS.
Author: Darin Reid (elcontraption)
Created on: June 28, 2018
Made with: HTML, CSS
Tags: wave, svg, css, ocean, animation

18. CSS Wave Animation With A .png

CSS Water Effects - 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)
Created on: July 25, 2017
Made with: HTML, CSS
Tags: css, animation, css-animation, wave animation, wave animation css