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

Water Wave CSS Effect

Pure CSS water wave text animation effect using CSS clip-path.

Sunrise Over Still Lake

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.

Pure CSS Rain

Simple CSS Waves

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

Underwater Pure CSS Animation

Outline. Pure CSS

Waves

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.

CSS Water Effect

Cup Filling with Water CSS Animation

Water Drop

Simple ripple animation.

Drip Drop Animation

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

Water Droplets on Window

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

CSS Text Filling with Water

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