41 CSS bubble Animations and Effects

Hello Coder! Welcome to Codewithrandom. Today we’ll see how to make bubble animations. Here we got the Latest Collection of free bubble animation Examples and Source codes.

Speech Bubble Animation

See the Pen <a href="https://codepen.io/anshing97/pen/JjgMRx" target="_blank" rel="noopener"> Speech Bubble Animation</a> by Ben Chao (<a href="https://codepen.io/anshing97" target="_blank" rel="noopener">@anshing97</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Ben Chao
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	Yes
Responsive	Yes

2. CSS bubbles

See the Pen <a href="https://codepen.io/r8n5n/pen/vgxedO" target="_blank" rel="noopener"> CSS bubbles</a> by r8n5n (<a href="https://codepen.io/r8n5n" target="_blank" rel="noopener">@r8n5n</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	r8n5n
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

3. Background Animation Test 1.5

See the Pen <a href="https://codepen.io/mprewitt/pen/XWVdpP" target="_blank" rel="noopener"> Background Animation Test 1.5</a> by Michael Prewitt (<a href="https://codepen.io/mprewitt" target="_blank" rel="noopener">@mprewitt</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Do you want to learn HTML to React? 🔥

If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions

Get your eBook now! 👇

Tap Me for eBook ➡️

Code By-	Michael Prewitt
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

4. SVG Glass Wave Animation

See the Pen <a href="https://codepen.io/gtoeurope/pen/wzmbNQ" target="_blank" rel="noopener"> SVG Glass Wave Animation</a> by GTO Europe (<a href="https://codepen.io/gtoeurope" target="_blank" rel="noopener">@gtoeurope</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	GTO Europe
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

5. Radar Bubble Animation

See the Pen <a href="https://codepen.io/zachacole/pen/qNwaZj" target="_blank" rel="noopener"> Radar Bubble Animation </a> by Zach Cole (<a href="https://codepen.io/zachacole" target="_blank" rel="noopener">@zachacole</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Zach Cole
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

6. Bubble-animated Login Form

See the Pen <a href="https://codepen.io/akhil_001/pen/jqGQRg" target="_blank" rel="noopener"> Bubble animated Login Form </a> by Akhil Sai Ram (<a href="https://codepen.io/akhil_001" target="_blank" rel="noopener">@akhil_001</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Akhil Sai Ram
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(Less) , JS
External Links\ Dependencies	Yes
Responsive	Yes

7. Pure Css Square Bubble Animation #CSSthat

See the Pen <a href="https://codepen.io/Vandan27/pen/dzGyoW" target="_blank" rel="noopener"> Pure Css Square Bubble Animation #CSSthat</a> by Vandan27 (<a href="https://codepen.io/Vandan27" target="_blank" rel="noopener">@Vandan27</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Vandan27
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

8. JavaScript Bubble Animation with GreenSock

See the Pen <a href="https://codepen.io/snorkltv/pen/abddMGd" target="_blank" rel="noopener"> JavaScript Bubble Animation with GreenSock</a> by Snorkl.tv (<a href="https://codepen.io/snorkltv" target="_blank" rel="noopener">@snorkltv</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Snorkl.tv
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

9. Duff Beer animation

See the Pen <a href="https://codepen.io/Fabbryzz/pen/nKoZLG" target="_blank" rel="noopener"> Duff Beer animation</a> by Fabrizio Colavito (<a href="https://codepen.io/Fabbryzz" target="_blank" rel="noopener">@Fabbryzz</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Fabrizio Colavito
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

10. Fancy bubble Animation

See the Pen <a href="https://codepen.io/vaniananthuni/pen/gMKeWL" target="_blank" rel="noopener"> Fancy bubble Animation</a> by Vani Ananthuni (<a href="https://codepen.io/vaniananthuni" target="_blank" rel="noopener">@vaniananthuni</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Vani Ananthuni
Demo And Download	Click Here For The Code
Language Used	HTML, JS
External Links\ Dependencies	No
Responsive	Yes

11. JavaScript Bubble animation

See the Pen <a href="https://codepen.io/nadeeShocks/pen/XZGqXM" target="_blank" rel="noopener"> JavaScript Bubble animation</a> by Nadia Iqbal (<a href="https://codepen.io/nadeeShocks" target="_blank" rel="noopener">@nadeeShocks</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Nadia Iqbal
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

12. Toybox Animated Icons

See the Pen <a href="https://codepen.io/jennchin/pen/aJgYKJ" target="_blank" rel="noopener"> Toybox Animated Icons</a> by Jenn (<a href="https://codepen.io/jennchin" target="_blank" rel="noopener">@jennchin</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jenn
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

13. Cool bubble animation on CSS or jQuery

See the Pen <a href="https://codepen.io/shmasya/pen/obrzKQ" target="_blank" rel="noopener"> Cool bubble animation on CSS or jQuery</a> by Shmasya (<a href="https://codepen.io/shmasya" target="_blank" rel="noopener">@shmasya</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Shmasya
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS) , JS
External Links\ Dependencies	Yes
Responsive	Yes

14. bubbles loading bar

See the Pen <a href="https://codepen.io/bsngr/pen/XWdvgV" target="_blank" rel="noopener"> bubbles loading bar</a> by betul (<a href="https://codepen.io/bsngr" target="_blank" rel="noopener">@bsngr</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	betul
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

15. Bubbles!

See the Pen <a href="https://codepen.io/scarlydesigns/pen/KKyvojw" target="_blank" rel="noopener"> Bubbles!</a> by Scarlett (<a href="https://codepen.io/scarlydesigns" target="_blank" rel="noopener">@scarlydesigns</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Scarlett
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

16. Blowing Bubble Gum

See the Pen <a href="https://codepen.io/jaymierosen/pen/YazYPK" target="_blank" rel="noopener"> Blowing Bubble Gum</a> by Jaymie Rosen (<a href="https://codepen.io/jaymierosen" target="_blank" rel="noopener">@jaymierosen</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jaymie Rosen
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS) , JS
External Links\ Dependencies	Yes
Responsive	Yes

17. Notification bubble animation

See the Pen <a href="https://codepen.io/2chainz/pen/oxqKaY" target="_blank" rel="noopener"> Notification bubble animation</a> by Emanuel Serbanoiu (<a href="https://codepen.io/2chainz" target="_blank" rel="noopener">@2chainz</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Emanuel Serbanoiu
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

18. Halloween Witch | Pure CSS

See the Pen <a href="https://codepen.io/karaluton/pen/yRVYvM" target="_blank" rel="noopener"> Halloween Witch | Pure CSS</a> by Kara Luton (<a href="https://codepen.io/karaluton" target="_blank" rel="noopener">@karaluton</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Kara Luton
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

19. Bouncing bubbles/Hover effect.

See the Pen <a href="https://codepen.io/memesAreLyfe/pen/NyxoVq" target="_blank" rel="noopener"> Bouncing bubbles/Hover effect.</a> by memesAreLyfe (<a href="https://codepen.io/memesAreLyfe" target="_blank" rel="noopener">@memesAreLyfe</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	memesAreLyfe
Demo And Download	Click Here For The Code
Language Used	HTML, CSS, JS
External Links\ Dependencies	Yes
Responsive	Yes

20. Bubble animation

See the Pen <a href="https://codepen.io/ftabor/pen/adPjvV" target="_blank" rel="noopener"> Bubble animation</a> by Francesca Tabor (<a href="https://codepen.io/ftabor" target="_blank" rel="noopener">@ftabor</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Francesca Tabor
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

21. Coca-Cola Bubbles

See the Pen <a href="https://codepen.io/isaacdb/pen/PpBpRq" target="_blank" rel="noopener"> Coca Cola Bubbles</a> by Isaac (<a href="https://codepen.io/isaacdb" target="_blank" rel="noopener">@isaacdb</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Isaac
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

22. Canvas Bubble Animation

See the Pen <a href="https://codepen.io/olegov99/pen/LgLbYX" target="_blank" rel="noopener"> Canvas Bubble Animation</a> by olegov99 (<a href="https://codepen.io/olegov99" target="_blank" rel="noopener">@olegov99</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	olegov99
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

23. Bubbles

See the Pen <a href="https://codepen.io/drfisher/pen/pyZmYm" target="_blank" rel="noopener"> Bubbles</a> by Pavel (<a href="https://codepen.io/drfisher" target="_blank" rel="noopener">@drfisher</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Pavel
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS(Babel)
External Links\ Dependencies	No
Responsive	Yes

24. Css3 bubbles animation

See the Pen <a href="https://codepen.io/jerrykoder/pen/AaYvMR" target="_blank" rel="noopener"> Css3 bubbles animation</a> by JerryKoder (<a href="https://codepen.io/jerrykoder" target="_blank" rel="noopener">@jerrykoder</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	JerryKoder
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

25. Background Bubble Animation

See the Pen <a href="https://codepen.io/mustafaquilon/pen/QGyZVJ" target="_blank" rel="noopener"> Background Bubble Animation</a> by Mustafa Quilon (<a href="https://codepen.io/mustafaquilon" target="_blank" rel="noopener">@mustafaquilon</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Mustafa Quilon
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

26. Untitled

See the Pen <a href="https://codepen.io/mrtuanphong/pen/QMZXQz" target="_blank" rel="noopener"> Untitled</a> by Peter Do (<a href="https://codepen.io/mrtuanphong" target="_blank" rel="noopener">@mrtuanphong</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Peter Do
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

27. Bubble Pop

See the Pen <a href="https://codepen.io/gurgen/pen/JMjLeg" target="_blank" rel="noopener"> Bubble Pop</a> by Gurgen Grigoryan (<a href="https://codepen.io/gurgen" target="_blank" rel="noopener">@gurgen</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Gurgen Grigoryan
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

28. Swimming Octopus – CSS only

See the Pen <a href="https://codepen.io/qkibit/pen/RjPEpE" target="_blank" rel="noopener"> Swimming Octopus – CSS only</a> by qkibit (<a href="https://codepen.io/qkibit" target="_blank" rel="noopener">@qkibit</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	qkibit
Demo And Download	Click Here For The Code
Language Used	HTML, CSS(SCSS)
External Links\ Dependencies	No
Responsive	Yes

29. Bubble Animation (Pure CSS)

See the Pen <a href="https://codepen.io/pabssen1/pen/MWywBao" target="_blank" rel="noopener"> Bubble Animation (Pure CSS)</a> by Debaditya Sen (<a href="https://codepen.io/pabssen1" target="_blank" rel="noopener">@pabssen1</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Debaditya Sen
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

30. SVG Bubbles

See the Pen <a href="https://codepen.io/zanewesley/pen/LYbxJOe" target="_blank" rel="noopener"> SVG Bubbles</a> by Zane Wesley (<a href="https://codepen.io/zanewesley" target="_blank" rel="noopener">@zanewesley</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Zane Wesley
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

31. Bubbles

See the Pen <a href="https://codepen.io/boberte/pen/qBqRVmO" target="_blank" rel="noopener"> Bubbles</a> by Boberte (<a href="https://codepen.io/boberte" target="_blank" rel="noopener">@boberte</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Boberte
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	No
Responsive	Yes

32. Bubbles

See the Pen <a href="https://codepen.io/animakuz/pen/aJwVLB" target="_blank" rel="noopener"> Bubbles</a> by Animakuz (<a href="https://codepen.io/animakuz" target="_blank" rel="noopener">@animakuz</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Animakuz
Demo And Download	Click Here For The Code
Language Used	HTML, CSS , JS
External Links\ Dependencies	Yes
Responsive	Yes

33. Bubble background animation

See the Pen <a href="https://codepen.io/diyorbek0309/pen/mdwbEve" target="_blank" rel="noopener"> Bubble background animation</a> by Diyorbek Olimov (<a href="https://codepen.io/diyorbek0309" target="_blank" rel="noopener">@diyorbek0309</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Diyorbek Olimov
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

34. bubble

See the Pen <a href="https://codepen.io/treknuts/pen/rNyPzmO" target="_blank" rel="noopener"> bubble</a> by Trevor Knutson (<a href="https://codepen.io/treknuts" target="_blank" rel="noopener">@treknuts</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Trevor Knutson
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

35. Bubble Trouble

See the Pen <a href="https://codepen.io/felixhornoiu/pen/MWdLow" target="_blank" rel="noopener"> Bubble Trouble</a> by Felix Hornoiu (<a href="https://codepen.io/felixhornoiu" target="_blank" rel="noopener">@felixhornoiu</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Felix Hornoiu
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

36. DROPMORPHISM UI DESIGN

See the Pen <a href="https://codepen.io/prathkum/pen/gOmboMm" target="_blank" rel="noopener"> DROPMORPHISM UI DESIGN</a> by Pratham (<a href="https://codepen.io/prathkum" target="_blank" rel="noopener">@prathkum</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Pratham
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

37. Pure CSS – animated Bubble and Mac

See the Pen <a href="https://codepen.io/samarkandiy/pen/nmdEmo" target="_blank" rel="noopener"> Pure CSS – animated Bubble and Mac</a> by Avaz Bokiev (<a href="https://codepen.io/samarkandiy" target="_blank" rel="noopener">@samarkandiy</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Avaz Bokiev
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

38. Jelly Bubble

See the Pen <a href="https://codepen.io/Jelilicent/pen/oNzPjEo" target="_blank" rel="noopener"> Jelly Bubble</a> by Jelilicent (<a href="https://codepen.io/Jelilicent" target="_blank" rel="noopener">@Jelilicent</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jelilicent
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

39.

Code By-
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

40. Toggle Bubble

See the Pen <a href="https://codepen.io/jkantner/pen/GRqrvJa" target="_blank" rel="noopener"> Toggle Bubble</a> by Jon Kantner (<a href="https://codepen.io/jkantner" target="_blank" rel="noopener">@jkantner</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	Jon Kantner
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	No
Responsive	Yes

41. Pop!

See the Pen <a href="https://codepen.io/startinmerc/pen/daYpew" target="_blank" rel="noopener"> Pop!</a> by startinmerc (<a href="https://codepen.io/startinmerc" target="_blank" rel="noopener">@startinmerc</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.

Code By-	startinmerc
Demo And Download	Click Here For The Code
Language Used	HTML, CSS
External Links\ Dependencies	Yes
Responsive	Yes

So Learners that’s all. We have included 41 creative bubble animations in this article. I hope you enjoyed reading this. Tell your other developers about this. We would love to hear your opinions and suggestions in the comments section below.

Check out our other posts on codewithrandom to learn more about front-end development.

Thank you