Post thumbnail: 7 CSS Water Effects

7 CSS Water Effects

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

Related Articles

  1. CSS Fire Animation

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

  • Danny

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Water in a Bubble

Just a random bubble with water.

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

Dependencies: -

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: -

back to top