7 CSS Water Effects
Collection of hand-picked free HTML and CSS water effect code examples.
- CSS Fire Animation
Author
- Nicholas Gratton
About the code
Waves
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
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: -
About the code
Water in a Bubble
Just a random bubble with water.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Jaron White
About the code
Water Drop
Simple ripple animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Adib Behjat
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
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
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: -