Collection of hand-picked free HTML and CSS water and waves effect code examples. Update of February 2020 collection. 3 new items.

Related Articles

  1. CSS Fire Animation

Author

  • Paulina Hetman

Made with

  • HTML / CSS (SCSS)

About a code

Sunrise Over Still Lake

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Cody Pearce

Made with

  • HTML / CSS

About a code

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Yannick Brandt

Made with

  • HTML / CSS

About a code

Pure CSS Rain

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Goodkatz

Made with

  • HTML / CSS

About a code

Simple CSS Waves

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Nicholas Gratton

Made with

  • HTML / CSS

About the code

Waves

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

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.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Author

  • JustSaas

Made with

  • HTML / CSS

About a code

Cup Filling with Water CSS Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Author

  • Jaron White

Made with

  • HTML / CSS

About the code

Water Drop

Simple ripple animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Adib Behjat

Made with

  • HTML / CSS

About the code

Drip Drop Animation

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Jérôme Beau

Made with

  • HTML / CSS (SCSS)

About the code

Water Droplets on Window

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Author

  • Lucas Bebber

Made with

  • HTML / CSS (SCSS)

About the code

CSS Text Filling with Water

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -