A Collection of hand-picked 8 free HTML and CSS water and waves effect code examples.

1.SIMPLE CSS WAVES

Lightweight animation between header & content. Easy to customize and apply to any website! Works with all devices and screen sizes.

Made with

1
2
Html
Css/SCSS

Author

1
Goodkatz

Demo


2.WAVES

Made with

1
2
3
Html
Css/SCSS
Javascript

Author

1
Nicholas Gratton

Demo


3.PURE CSS RANDOM RAIN WITH SVG AND CSS VARIABLES

Using randomly generated CSS variables cuts down the CSS and gives droplets random positioning and animation properties.

Made with

1
HTML (Pug) / CSS (Stylus)

Author

1
Jhey

Demo


4.WATER DROP

Simple ripple animation.

Made with

1
HTML / CSS

Author

1
Jaron White

Demo


5.DRIP DROP ANIMATION

Water dripping and dropping. Using bezier curve to get the correct speed.

Made with

1
2
Html
Css

Author

1
Adib Behjat

Demo


6.WATER DROPLETS ON WINDOW

Focusing effect on either first translucent layer or the layer behind.

Made with

1
2
Html
Css/SCSS

Author

1
Jérôme Beau

Demo


7.CSS TEXT FILLING WITH WATER

A text filling with water animation, for preloaders and such.

Made with

1
2
Html
Css/SCSS

Author

1
Lucas Bebber

Demo


8.PURE CSS RAIN

Made with

1
2
Html
Css/SCSS

Author

1
Yannick Brandt

Demo