32+ CSS Water Effects

Best 32+ HTML and CSS water effect examples. A free compilation for web designers and developers sourced from CodePen, and GitHub.

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)