30+ CSS Water Effects

Last Updated on by in CSS Examples
CSS Water Effect Animations

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

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.