12 CSS Water Effects

About a code

Sunrise Over Still Lake

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

Responsive: yes

Dependencies: -

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

About a code

Pure CSS Rain

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

Responsive: no

Dependencies: -

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

About the code

Waves

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

Dependencies: -

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

About a code

Cup Filling with Water CSS Animation

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

Responsive: no

Dependencies: bootstrap.css

About the code

Water Drop

Simple ripple animation.

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

Dependencies: -

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

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

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