32+ CSS Water Effects

Are you looking to add dynamic and fluid motion to your web projects? Look no further, In this collection, we are showcasing the top 32+ HTML and CSS water effect code examples that we have collected from CodePen, GitHub, and other top-notch platforms.

Water animation is a captivating design technique that adds realistic water-like effects to web pages, enhancing visual appeal, user experience, and engagement. Whether you’re a designer or developer, you can use any of the water effects from our compilation to uplift the mood of your site visitors.

These captivating animations—ranging from immersive rain effects and water loading animations or underwater CSS animation to water drop animations, we have enough items to cater everyones need. Each water effect is carefully selected, making a webpage more engaging, add personality to webpages and make them visually interesting.

Let’s checkout these free CSS water effects and make your site more interactive.

1. Pure CSS Random Rain (SVG + CSS )

See the Pen <a href="https://codepen.io/jh3y/pen/WyNdMG"> Pure CSS random rain w/ SVG + CSS variables ☔️🦆</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: MAY 29, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus)

2. Realistic Water Effect | SVG

See the Pen <a href="https://codepen.io/shaiqkar/pen/QWWwZwj"> Realistic Water Effect | SVG</a> by Shaiq (<a href="https://codepen.io/shaiqkar">@shaiqkar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shaiq
Source: Code / Demo
Created on: OCTOBER 8, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

3. CSS Water Loading Animation

See the Pen <a href="https://codepen.io/claudz1/pen/ypPWWx"> CSS Water Loading Animation</a> by Claudia Alphonse (<a href="https://codepen.io/claudz1">@claudz1</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Claudia Alphonse
Source: Code / Demo
Created on: JANUARY 07, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. water effect

See the Pen <a href="https://codepen.io/Aleksandrova/pen/JmOYaQ"> water effect</a> by Alina (<a href="https://codepen.io/Aleksandrova">@Aleksandrova</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alina
Source: Code / Demo
Created on: OCTOBER 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

5. Underwater Pure CSS Animation

See the Pen <a href="https://codepen.io/tdoughty/pen/ZZqgQq"> Underwater Pure CSS Animation</a> by Travis Doughty (<a href="https://codepen.io/tdoughty">@tdoughty</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Travis Doughty
Source: Code / Demo
Created on: APRIL 24, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

6. CSS Water effect

See the Pen <a href="https://codepen.io/DucatiGerhard/pen/LYGdrgz"> CSS Water effect</a> by Gerhard Treiber (<a href="https://codepen.io/DucatiGerhard">@DucatiGerhard</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Gerhard Treiber
Source: Code / Demo
Created on: JULY 7, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Outline Pure CSS

See the Pen <a href="https://codepen.io/ig_design/pen/zyEVBd"> Outline – pure css – #03</a> by Ivan Grozdic (<a href="https://codepen.io/ig_design">@ig_design</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ivan Grozdic
Source: Code / Demo
Created on: DECEMBER 30, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Water Drop

See the Pen <a href="https://codepen.io/jaronwhite/pen/zrmozE"> Water Drop</a> by Jaron White (<a href="https://codepen.io/jaronwhite">@jaronwhite</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jaron White
Source: Code / Demo
Created on: FEBRUARY 05, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. water effect

See the Pen <a href="https://codepen.io/buihoang91tin/pen/NEGKgO"> Water Effect</a> by buihoang (<a href="https://codepen.io/buihoang91tin">@buihoang91tin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: buihoang
Source: Code / Demo
Created on: NOVEMBER 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

10. Drip Drop Animation

See the Pen <a href="https://codepen.io/abehjat/pen/oXMENv"> Drip Drop Animation (No JS)</a> by Adib Behjat (<a href="https://codepen.io/abehjat">@abehjat</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Adib Behjat
Source: Code / Demo
Created on: JULY 18, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Sunrise Over Still Lake

See the Pen <a href="https://codepen.io/pehaa/pen/yLVeLNg"> Sunrise over still lake</a> by Paulina Hetman (<a href="https://codepen.io/pehaa">@pehaa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Paulina Hetman
Source: Code / Demo
Created on: FEBRUARY 4, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

12. water effect using css

See the Pen <a href="https://codepen.io/milanpj/pen/WNOQmxg"> water effect using css</a> by monster coder (<a href="https://codepen.io/milanpj">@milanpj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: monster coder
Source: Code / Demo
Created on: AUGUST 30, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. CSS Text Filling with Water

See the Pen <a href="https://codepen.io/lbebber/pen/naarWa"> CSS Text filling with water</a> by Lucas Bebber (<a href="https://codepen.io/lbebber">@lbebber</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lucas Bebber
Source: Code / Demo
Created on: NOVEMBER 12, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Octocat Sprite Swimming in the Ocean with CSS

See the Pen <a href="https://codepen.io/codypearce/pen/VwYOGzq"> Octocat Sprite Swimming in the Ocean with CSS</a> by Cody Pearce (<a href="https://codepen.io/codypearce">@codypearce</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cody Pearce
Source: Code / Demo
Created on: JANUARY 30, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. PixiJS Water Effect

See the Pen <a href="https://codepen.io/GhostKozak/pen/KKwqGNv"> PixiJS Water Effect</a> by GhostKozak (<a href="https://codepen.io/GhostKozak">@GhostKozak</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: GhostKozak
Source: Code / Demo
Created on: DECEMBER 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Simple CSS Waves

See the Pen <a href="https://codepen.io/goodkatz/pen/LYPGxQz"> Simple CSS Waves | Mobile & Full width</a> by Goodkatz (<a href="https://codepen.io/goodkatz">@goodkatz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Goodkatz
Source: Code / Demo
Created on: AUGUST 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. Waterdroplet WebGL Shader

See the Pen <a href="https://codepen.io/stefanweck/pen/Vbgeax"> Waterdroplet WebGL Shader</a> by Stefan Weck (<a href="https://codepen.io/stefanweck">@stefanweck</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stefan Weck
Source: Code / Demo
Created on: MAY 23, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

18. Waves

See the Pen <a href="https://codepen.io/ngratton/pen/MZKJvr"> Waves</a> by Nicholas Gratton (<a href="https://codepen.io/ngratton">@ngratton</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicholas Gratton
Source: Code / Demo
Created on: DECEMBER 13, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Water Droplets on Window

See the Pen <a href="https://codepen.io/Javarome/pen/ogEoJM"> Water droplets on window</a> by Jérôme Beau (<a href="https://codepen.io/Javarome">@Javarome</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jérôme Beau
Source: Code / Demo
Created on: FEBRUARY 14, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Water effect shader

See the Pen <a href="https://codepen.io/AlainBarrios/pen/gZOjje"> Water effect shader</a> by Alain (<a href="https://codepen.io/AlainBarrios">@AlainBarrios</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alain
Source: Code / Demo
Created on: DECEMBER 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

21. Cool Text Animation

See the Pen <a href="https://codepen.io/avkuznetsov54/pen/rQzRLV"> Cool Text Animation | Water Animation Using Only HTML & CSS</a> by Aleksandr (<a href="https://codepen.io/avkuznetsov54">@avkuznetsov54</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aleksandr
Source: Code / Demo
Created on: NOVEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass)

22. Waterwave Animation

See the Pen <a href="https://codepen.io/techgirldiaries/pen/LYWPJPN"> tgd-waterwave-animation</a> by Oluwakemi (<a href="https://codepen.io/techgirldiaries">@techgirldiaries</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Oluwakemi
Source: Code / Demo
Created on: MAY 5, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Pure CSS Water Waves

See the Pen <a href="https://codepen.io/re3ker/pen/aOwKLe"> Pure CSS Water Waves [Test]</a> by Re3ker (<a href="https://codepen.io/re3ker">@re3ker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Re3ker
Source: Code / Demo
Created on: JUNE 12, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Slim), CSS(Stylus)

24. Water Effect

See the Pen <a href="https://codepen.io/osublake/pen/gmPQWX"> Water Effect</a> by Blake Bowen (<a href="https://codepen.io/osublake">@osublake</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Blake Bowen
Source: Code / Demo
Created on: MARCH 2, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

25. Cup Filling with Water CSS Animation

See the Pen <a href="https://codepen.io/JustSaas/pen/xYwLag"> Cup filling with Water CSS Animation</a> by JustSaas (<a href="https://codepen.io/JustSaas">@JustSaas</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JustSaas
Source: Code / Demo
Created on: FEBRUARY 01, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. CSS Water Wave

See the Pen <a href="https://codepen.io/solhuang/pen/ZqLoJr"> CSS Water Wave</a> by sol (<a href="https://codepen.io/solhuang">@solhuang</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: sol
Source: Code / Demo
Created on: OCTOBER 9, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(Sass), JavaScript

27. CSS Water Effect

See the Pen <a href="https://codepen.io/IstiyakAmin/pen/aqZWWN"> CSS Water Effect</a> by Istiyak Amin (<a href="https://codepen.io/IstiyakAmin">@IstiyakAmin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Istiyak Amin
Source: Code / Demo
Created on: FEBRUARY 05, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Simple SVG Water Effect

See the Pen <a href="https://codepen.io/soju22/pen/OqPyrm"> Simple SVG Water Effect</a> by Kevin Levron (<a href="https://codepen.io/soju22">@soju22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kevin Levron
Source: Code / Demo
Created on: FEBRUARY 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

29. Only CSS: Water Surface

See the Pen <a href="https://codepen.io/YusukeNakaya/pen/vvEqVx"> Only CSS: Water Surface #CodePenChallenge</a> by Yusuke Nakaya (<a href="https://codepen.io/YusukeNakaya">@YusukeNakaya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yusuke Nakaya
Source: Code / Demo
Created on: DECEMBER 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug) CSS(SCSS)

30. svg water wave

See the Pen <a href="https://codepen.io/xueyan/pen/qBPNPV"> svg water wave</a> by lu (<a href="https://codepen.io/xueyan">@xueyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: lu
Source: Code / Demo
Created on: JUNE 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Pure CSS Rain

See the Pen <a href="https://codepen.io/Coderesting/pen/RwwLPZM"> Pure CSS Rain</a> by Yannick Brandt (<a href="https://codepen.io/Coderesting">@Coderesting</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yannick Brandt
Source: Code / Demo
Created on: OCTOBER 29, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Wobbly water effect

See the Pen <a href="https://codepen.io/NicG12/pen/RyvXyY"> Wobbly water effect</a> by Nicholas Gew (<a href="https://codepen.io/NicG12">@NicG12</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicholas Gew
Source: Code / Demo
Created on: MAY 21, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. CSS Water Ripples with Blend Modes

See the Pen <a href="https://codepen.io/giana/pen/YdwYZG"> CSS water ripples with blend modes</a> by Giana (<a href="https://codepen.io/giana">@giana</a>) on <a href="https://codepen.io">CodePen</a>. Author: Giana
Source: Code / Demo
Created on: DECEMBER 14, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)