50+ CSS Bubble Animations That Pop: CodePen Examples to Inspire Your Designs

Master CSS animation skills by exploring 50+ creative bubble effects. Learn to create smooth, eye-catching animations that elevate your web projects.

1. Submarine & Bubbles by Emily Goldfein

Author: Emily Goldfein
Links: Source Code / Demo
Made with: HTML CSS


2. Notification bubble animation by Emanuel Serbanoiu

Author: Emanuel Serbanoiu
Links: Source Code / Demo
Made with: HTML CSS


3. bubbles loading bar by betul

Author: betul
Links: Source Code / Demo
Made with: HTML CSS


4. Animated Bubble and Mac by Avaz Bokiev

Author: Avaz Bokiev
Links: Source Code / Demo
Made with: HTML CSS


5. Bubbles! by Scarlett

Author: Scarlett
Links: Source Code / Demo
Made with: HTML CSS


6. Bunny Blowing Bubbles Breathing Exercise by Wendy Kong

Author: Wendy Kong
Links: Source Code / Demo
Made with: HTML CSS


7. Pop! by startinmerc

Author: startinmerc
Links: Source Code / Demo
Made with: HTML CSS


8. Bubble Sort by MenSeb

Author: MenSeb
Links: Source Code / Demo
Made with: HTML CSS


9. Background Bubble Animation by Mustafa Quilon

Author: Mustafa Quilon
Links: Source Code / Demo
Made with: HTML CSS


10. Pure CSS – animated Bubble and Mac by Avaz Bokiev

Author: Avaz Bokiev
Links: Source Code / Demo
Made with: HTML CSS


11. Halloween Witch | Pure CSS by Kara Luton

Author: Kara Luton
Links: Source Code / Demo
Made with: HTML CSS


12. Pure Css Square Bubble Animation #CSSthat by Vandan27

Author: Vandan27
Links: Source Code / Demo
Made with: HTML CSS


13. SVG Bubbles by Zane Wesley

Author: Zane Wesley
Links: Source Code / Demo
Made with: HTML CSS


14. Bubble background animation by Diyorbek Olimov

Author: Diyorbek Olimov
Links: Source Code / Demo
Made with: HTML CSS


15. Swimming Octopus – CSS only by qkibit

Author: qkibit
Links: Source Code / Demo
Made with: HTML CSS


16. Bubble by Rahul Goswami

Author: Rahul Goswami
Links: Source Code / Demo
Made with: HTML CSS


17. Bubble Pop by Gurgen Grigoryan

Author: Gurgen Grigoryan
Links: Source Code / Demo
Made with: HTML CSS


18. Blowing Bubble Gum by Jaymie Rosen

Author: Jaymie Rosen
Links: Source Code / Demo
Made with: HTML CSS


19. Bubbles by Animakuz

Author: Animakuz
Links: Source Code / Demo
Made with: HTML CSS


20. SVG Glass Wave Animation by GTO Europe

Author: GTO Europe
Links: Source Code / Demo
Made with: HTML CSS


21. CSS bubbles by r8n5n

Author: r8n5n
Links: Source Code / Demo
Made with: HTML CSS


22. Background Animation Test 1.5 by Michael Prewitt

Author: Michael Prewitt
Links: Source Code / Demo
Made with: HTML CSS


23. Squishy Bubble by LoFi

Author: LoFi
Links: Source Code / Demo
Made with: HTML CSS


24. Canvas Bubble Animation by olegov99

Author: olegov99
Links: Source Code / Demo
Made with: HTML CSS


25. Untitled by Peter Do

Author: Peter Do
Links: Source Code / Demo
Made with: HTML CSS


26. Bubble animation by Francesca Tabor

Author: Francesca Tabor
Links: Source Code / Demo
Made with: HTML CSS


27. Bubble-animated Login Form by Akhil Sai Ram

Author: Akhil Sai Ram
Links: Source Code / Demo
Made with: HTML CSS


28. Bubbles by Pavel

Author: Pavel
Links: Source Code / Demo
Made with: HTML CSS


29. DROPMORPHISM UI DESIGN by Pratham

Author: Pratham
Links: Source Code / Demo
Made with: HTML CSS


30. bubble by Trevor Knutson

Author: Trevor Knutson
Links: Source Code / Demo
Made with: HTML CSS


31. Random Moving Bubbles by Arpad Bajzath

Author: Arpad Bajzath
Links: Source Code / Demo
Made with: HTML CSS


32. Coca-Cola Bubbles by Isaac

Author: Isaac
Links: Source Code / Demo
Made with: HTML CSS


33. Bubble Trouble by Felix Hornoiu

Author: Felix Hornoiu
Links: Source Code / Demo
Made with: HTML CSS


34. Cool bubble animation on CSS or jQuery by Shmasya

Author: Shmasya
Links: Source Code / Demo
Made with: HTML CSS


35. Css3 bubbles animation by JerryKoder

Author: JerryKoder
Links: Source Code / Demo
Made with: HTML CSS


36. Speech Bubble Animation by Ben Chao

Author: Ben Chao
Links: Source Code / Demo
Made with: HTML CSS


37. Fancy bubble Animation by Vani Ananthuni

Author: Vani Ananthuni
Links: Source Code / Demo
Made with: HTML CSS


38. JavaScript Bubble animation by Nadia Iqbal

Author: Nadia Iqbal
Links: Source Code / Demo
Made with: HTML CSS


39. Toybox Animated Icons by Jenn

Author: Jenn
Links: Source Code / Demo
Made with: HTML CSS


40. Bubbles by Boberte

Author: Boberte
Links: Source Code / Demo
Made with: HTML CSS


41. Jelly Bubble by Jelilicent

Author: Jelilicent
Links: Source Code / Demo
Made with: HTML CSS


42. Duff Beer animation by Fabrizio Colavito

Author: Fabrizio Colavito
Links: Source Code / Demo
Made with: HTML CSS


43. Bubble Wrap by Jon Kantner

Author: Jon Kantner
Links: Source Code / Demo
Made with: HTML CSS


44. Bubble CSS3 by Kévin Chassagne

Author: Kévin Chassagne
Links: Source Code / Demo
Made with: HTML CSS


45. Bubble Animation (Pure CSS) by Debaditya Sen

Author: Debaditya Sen
Links: Source Code / Demo
Made with: HTML CSS


46. CSS Random Bubbles Background by Marko

Author: Marko
Links: Source Code / Demo
Made with: HTML CSS


47. Radar Bubble Animation by Zach Cole

Author: Zach Cole
Links: Source Code / Demo
Made with: HTML CSS


48. Bubble by theUnnamedRd

Author: theUnnamedRd
Links: Source Code / Demo
Made with: HTML CSS


49. Bubbling Experiment by Melanie Hoek

Author: Melanie Hoek
Links: Source Code / Demo
Made with: HTML CSS


50. JavaScript Bubble Animation with GreenSock by Snorkl.tv

Author: Snorkl.tv
Links: Source Code / Demo
Made with: HTML CSS


51. Toggle Bubble by Jon Kantner

Author: Jon Kantner
Links: Source Code / Demo
Made with: HTML CSS


52. Bouncing bubbles/Hover effect. by memesAreLyfe

Author: memesAreLyfe
Links: Source Code / Demo
Made with: HTML CSS