Collection of hand-picked free HTML and CSS water and waves effect code examples. Update of February 2020 collection. 3 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
About a code
Sunrise Over Still Lake
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About a code
Pure CSS Rain
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
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: -
Links
Made with
- HTML / CSS
About the code
Waves
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
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
Links
Made with
- HTML / CSS
About the code
Water Drop
Simple ripple animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Links
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: -
Links
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: -
Links
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: -