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

Html
Css/SCSS

Author

Goodkatz

Demo

2.WAVES

Made with

Html
Css/SCSS
Javascript

Author

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

HTML (Pug) / CSS (Stylus)

Author

Jhey

Demo

4.WATER DROP

Simple ripple animation.

Made with

HTML / CSS

Author

Jaron White

Demo

5.DRIP DROP ANIMATION

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

Made with

Html
Css

Author

Adib Behjat

Demo

6.WATER DROPLETS ON WINDOW

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

Made with

Html
Css/SCSS

Author

Jérôme Beau

Demo

7.CSS TEXT FILLING WITH WATER

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

Made with

Html
Css/SCSS

Author

Lucas Bebber

Demo

8.PURE CSS RAIN

Made with

Html
Css/SCSS

Author

Yannick Brandt

Demo