If you are looking to explore a curated collection of CSS water effects, you are in the right place! Today, we have a beautiful collection of top CSS water effects for our beloved web design community. These free water animations help web designers add a real water like animation in their web projects.
We have added 11 new examples of CSS Water Effects to our latest collection, aimed at enhancing your web design beauty. Make sure to check them out.
Our handpicked water effect examples are made with pure HTML and CSS code and gathered from authentic sites, like:, CodePen and GitHub.
Being a frontend developer, it is a time-consuming process to build creative water animation effects from scratch. Our animation collection will give you a robust understanding of how to use HTML, CSS, and sometimes JavaScript to incorporate creative animation that simulate realistic water-related phenomena in web pages or web applications.
If you want to customize these, you can tweak these effects according to specific project requirements. CSS and HTML provide the flexibility to modify and personalize these animations.
Let’s check out these visually stunning water effects for building immersive web experiences.
01. Sunrise Over Still Lake
See the Pen
Sunrise over still lake by Paulina Hetman (@pehaa)
on CodePen.
Author: Paulina Hetman @pehaa
Links: Source Code / Demo
Created on: February 4, 2021
Made with: HTML, CSS, SCSS
02. Simple CSS Waves
See the Pen
Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz)
on CodePen.
Author: Goodkatz @goodkatz
Links: Source Code / Demo
Created on: August 13, 2019
Made with: HTML, CSS
03. Water Droplets on Window
See the Pen
Water droplets on window by Jérôme Beau (@Javarome)
on CodePen.
Author: Jérôme Beau @Javarome
Links: Source Code / Demo
Created on: February 14, 2015
Made with: HTML, CSS
04. Pure CSS Water Waves
See the Pen
Pure CSS Water Waves [Test] by Re3ker (@re3ker)
on CodePen.
Author: Re3ker @re3ker
Links: Source Code / Demo
Created on: June 12, 2015
Made with: HTML (Slim), CSS(Stylus)
05. CSS Water Effect
See the Pen
CSS Water Effect by Istiyak Amin (@IstiyakAmin)
on CodePen.
Author: Istiyak Amin @IstiyakAmin
Links: Source Code / Demo
Created on: February 05, 2018
Made with: HTML, CSS
06. Pure CSS Rain
See the Pen
Pure CSS Rain by Yannick Brandt (@Coderesting)
on CodePen.
Author: Yannick Brandt @Coderesting
Links: Source Code / Demo
Created on: October 29, 2019
Made with: HTML, CSS
07. Underwater Pure CSS Animation
See the Pen
Underwater Pure CSS Animation by Travis Doughty (@tdoughty)
on CodePen.
Author: Travis Doughty @tdoughty
Links: Source Code / Demo
Created on: April 24, 2019
Made with: HTML(Pug), CSS, SCSS
08. Pure CSS Random Rain (SVG + CSS )
See the Pen
Pure CSS random rain w/ SVG + CSS variables ☔️???? by Jhey (@jh3y)
on CodePen.
Author: JHEY @jh3y
Links: Source Code / Demo
Created on: May 29, 2018
Made with: HTML(Pug), CSS(Stylus)
09. Water Drop
See the Pen
Water Drop by Jaron White (@jaronwhite)
on CodePen.
Author: Jaron White @jaronwhite
Links: Source Code / Demo
Created on: February 05, 2016
Made with: HTML, CSS
10. CSS Text Filling with Water
See the Pen
CSS Text filling with water by Lucas Bebber (@lbebber)
on CodePen.
Author: Lucas Bebber @lbebber
Links: Source Code / Demo
Created on: November 12, 2013
Made with: HTML, CSS, SCSS
11. Cool Text Animation
See the Pen
Cool Text Animation | Water Animation Using Only HTML & CSS by Aleksandr (@avkuznetsov54)
on CodePen.
Author: Aleksandr @avkuznetsov54
Links: Source Code / Demo
Created on: November 18, 2018
Made with: HTML, CSS, SASS
12. Cup Filling with Water CSS Animation
See the Pen
Cup filling with Water CSS Animation by JustSaas (@JustSaas)
on CodePen.
Author: JustSaas @JustSaas
Links: Source Code / Demo
Created on: February 01, 2018
Made with: HTML, CSS
13.Only CSS: Water Surface
See the Pen
Only CSS: Water Surface #CodePenChallenge by Yusuke Nakaya (@YusukeNakaya)
on CodePen.
Author: Yusuke Nakaya @YusukeNakaya
Links: Source Code / Demo
Created on: December 11, 2018
Made with: HTML(Pug) CSS, SCSS
14.CSS Water Ripples with Blend Modes
See the Pen
CSS water ripples with blend modes by Giana (@giana)
on CodePen.
Author: Giana @giana
Links: Source Code / Demo
Created on: December 14, 2018
Made with: HTML, CSS, SCSS
15. CSS Water Loading Animation
See the Pen
CSS Water Loading Animation by Claudia Alphonse (@claudz1)
on CodePen.
Author: Claudia Alphonse @claudz1
Links: Source Code / Demo
Created on: January 07, 2018
Made with: HTML, CSS
16. Outline Pure CSS
See the Pen
Outline – pure css – #03 by Ivan Grozdic (@ig_design)
on CodePen.
Author: Ivan Grozdic @ig_design
Links: Source Code / Demo
Created on: December 30, 2018
Made with: HTML, CSS
17. Drip Drop Animation
See the Pen
Drip Drop Animation (No JS) by Adib Behjat (@abehjat)
on CodePen.
Author: Adib Behjat @abehjat
Links: Source Code / Demo
Created on: July 18, 2015
Made with: HTML, CSS
18. Octocat Sprite Swimming in the Ocean with CSS
See the Pen
Octocat Sprite Swimming in the Ocean with CSS by Cody Pearce (@codypearce)
on CodePen.
Author: Cody Pearce @codypearce
Links: Source Code / Demo
Created on: January 30, 2020
Made with: HTML, CSS
19. Waves
See the Pen
Waves by Nicholas Gratton (@ngratton)
on CodePen.
Author: Nicholas Gratton @ngratton
Links: Source Code / Demo
Created on: December 13, 2018
Made with: HTML, CSS
20. Waterwave Animation
See the Pen
tgd-waterwave-animation by Oluwakemi (@techgirldiaries)
on CodePen.
Author: Oluwakemi @techgirldiaries
Links: Source Code / Demo
Created on: May 5, 2021
Made with: HTML, CSS
21. Water Effect
See the Pen
Water Effect by Blake Bowen (@osublake)
on CodePen.
strong>Author: Blake Bowen @osublake
Links: Source Code / Demo
Created on: March 2, 2017
Made with: HTML, CSS(SCSS), JS
22. Simple SVG Water Effect
See the Pen
Simple SVG Water Effect by Kevin Levron (@soju22)
on CodePen.
Author: Kevin Levron @soju22
Links: Source Code / Demo
Created on: February 26, 2019
Made with: HTML, CSS
23. Realistic Water Effect | SVG
See the Pen
Realistic Water Effect | SVG by Shaiq (@shaiqkar)
on CodePen.
Author: Shaiq @shaiqkar
Links: Source Code / Demo
Created on: October 8, 2019
Made with: HTML, CSS
24. CSS Water effect
See the Pen
CSS Water effect by Gerhard Treiber (@DucatiGerhard)
on CodePen.
Author: Gerhard Treiber @DucatiGerhard
Links: Source Code / Demo
Created on: JULY 7, 2020
Made with: HTML, CSS
25. Wobbly water effect
See the Pen
Wobbly water effect by Nicholas Gew (@NicG12)
on CodePen.
Author: Nicholas Gew @NicG12
Links: Source Code / Demo
Created on: May 21, 2018
Made with: HTML, CSS
26. water effect
See the Pen
water effect by Alina (@Aleksandrova)
on CodePen.
Author: Alina @Aleksandrova
Links: Source Code / Demo
Created on: October 15, 2018
Made with: HTML, CSS, JS
27. water effect
See the Pen
Water Effect by buihoang (@buihoang91tin)
on CodePen.
Author: buihoang @buihoang91tin
Links: Source Code / Demo
Created on: November 6, 2018
Made with: HTML, CSS(SCSS), JS
28. water effect using css
See the Pen
water effect using css by monster coder (@milanpj)
on CodePen.
Author: monster coder @milanpj
Links: Source Code / Demo
Created on: August 30, 2021
Made with: HTML, CSS, JS
29. PixiJS Water Effect
See the Pen
PixiJS Water Effect by GhostKozak (@GhostKozak)
on CodePen.
Author: GhostKozak @GhostKozak
Links: Source Code / Demo
Created on: December 26, 2019
Made with: HTML, CSS, JS
30. Waterdroplet WebGL Shader
See the Pen
Waterdroplet WebGL Shader by Stefan Weck (@stefanweck)
on CodePen.
Author: Stefan Weck @stefanweck
Links: Source Code / Demo
Created on: May 23, 2017
Made with: HTML, CSS, JS
31. Water effect shader
See the Pen
Water effect shader by Alain (@AlainBarrios)
on CodePen.
Author: Alain @AlainBarrios
Links: Source Code / Demo
Created on: December 10, 2018
Made with: HTML, CSS, JS