25+ CSS Bubble Animatons

Free collection of top 25+ HTML and CSS bubble animation examples. Each bubble effect is sourced from Codepen, best for making your website look dazzling at absolutely no cost.

1. Bunny Blowing Bubbles Breathing Exercise

See the Pen <a href="https://codepen.io/wendko/pen/eYJzBjV"> Bunny Blowing Bubbles Breathing Exercise</a> by Wendy Kong (<a href="https://codepen.io/wendko">@wendko</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wendy Kong
Source: Code / Demo
Created on: JUNE 13, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. Animated Bubbles

See the Pen <a href="https://codepen.io/bh/pen/kxgzgZ"> Animated Bubbles</a> by Ben Hodgson (<a href="https://codepen.io/bh">@bh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ben Hodgson
Source: Code / Demo
Created on: MAY 18, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

3. Bubble Sort

See the Pen <a href="https://codepen.io/MenSeb/pen/YMRYRp"> Bubble Sort</a> by MenSeb (<a href="https://codepen.io/MenSeb">@MenSeb</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: MenSeb
Source: Code / Demo
Created on: APRIL 25, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

4. Jelly Bubble

See the Pen <a href="https://codepen.io/Jelilicent/pen/oNzPjEo"> Jelly Bubble</a> by Jelilicent (<a href="https://codepen.io/Jelilicent">@Jelilicent</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jelilicent
Source: Code / Demo
Created on: JANUARY 10, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Animated – SVG Bubbles

See the Pen <a href="https://codepen.io/matchboxhero/pen/LzdgOv"> Animated – SVG Bubbles</a> by Steven Roberts (<a href="https://codepen.io/matchboxhero">@matchboxhero</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steven Roberts
Source: Code / Demo
Created on: OCTOBER 9, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

6. Squishy bubble

See the Pen <a href="https://codepen.io/loficodes/pen/GLpNYg"> Squishy bubble</a> by LoFi (<a href="https://codepen.io/loficodes">@loficodes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: LoFi
Source: Code / Demo
Created on: APRIL 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

7. Pure CSS Animated Bubbles

See the Pen <a href="https://codepen.io/Mark_Bowley/pen/PozwyP"> Pure CSS Animated Bubbles</a> by Mark Bowley (<a href="https://codepen.io/Mark_Bowley">@Mark_Bowley</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Bowley
Source: Code / Demo
Created on: APRIL 22, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Bubble

See the Pen <a href="https://codepen.io/Goswami_Rahul/pen/ExOwqVE"> Bubble</a> by Rahul Goswami (<a href="https://codepen.io/Goswami_Rahul">@Goswami_Rahul</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rahul Goswami
Source: Code / Demo
Created on: JULY 9, 2023
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Bubble Wrap

See the Pen <a href="https://codepen.io/jkantner/pen/MWbbMYZ"> Bubble Wrap</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: FEBRUARY 12, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS, JavaScript

10. Bubble Trouble

See the Pen <a href="https://codepen.io/felixhornoiu/pen/MWdLow"> Bubble Trouble</a> by Felix Hornoiu (<a href="https://codepen.io/felixhornoiu">@felixhornoiu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Felix Hornoiu
Source: Code / Demo
Created on: OCTOBER 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Toggle Bubble

See the Pen <a href="https://codepen.io/jkantner/pen/GRqrvJa"> Toggle Bubble</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: OCTOBER 24, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Canvas Bubbles

See the Pen <a href="https://codepen.io/MarioD/pen/gWregQ"> Canvas Bubbles</a> by Mariusz Dabrowski (<a href="https://codepen.io/MarioD">@MarioD</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mariusz Dabrowski
Source: Code / Demo
Created on: APRIL 21, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. CSS Random Bubbles background

See the Pen <a href="https://codepen.io/marko-zub/pen/ZmGOBe"> CSS Random Bubbles background</a> by Marko (<a href="https://codepen.io/marko-zub">@marko-zub</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Marko
Source: Code / Demo
Created on: NOVEMBER 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

14. DROPMORPHISM UI DESIGN

See the Pen <a href="https://codepen.io/prathkum/pen/gOmboMm"> DROPMORPHISM UI DESIGN</a> by Pratham (<a href="https://codepen.io/prathkum">@prathkum</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Pratham
Source: Code / Demo
Created on: MAY 7, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Bubbling experiment

See the Pen <a href="https://codepen.io/melanie-hoek/pen/QWyjzWW"> Bubbling experiment</a> by Melanie Hoek (<a href="https://codepen.io/melanie-hoek">@melanie-hoek</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Melanie Hoek
Source: Code / Demo
Created on: JUNE 9, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

16. Bubble CSS3

See the Pen <a href="https://codepen.io/KevinChassagne/pen/abjyOX"> Bubble CSS3</a> by Kévin Chassagne (<a href="https://codepen.io/KevinChassagne">@KevinChassagne</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kévin Chassagne
Source: Code / Demo
Created on: AUGUST 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. bubble

See the Pen <a href="https://codepen.io/treknuts/pen/rNyPzmO"> bubble</a> by Trevor Knutson (<a href="https://codepen.io/treknuts">@treknuts</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Trevor Knutson
Source: Code / Demo
Created on: JUNE 16, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Love and Bubbles!

See the Pen <a href="https://codepen.io/chrisgannon/pen/JGXVaR"> Love and Bubbles!</a> by Chris Gannon (<a href="https://codepen.io/chrisgannon">@chrisgannon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Gannon
Source: Code / Demo
Created on: DECEMBER 20, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

19. Submarine & Bubbles

See the Pen <a href="https://codepen.io/emilygoldfein/pen/bWBrgy"> Submarine & Bubbles</a> by Emily Goldfein (<a href="https://codepen.io/emilygoldfein">@emilygoldfein</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Emily Goldfein
Source: Code / Demo
Created on: APRIL 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Pixi Sprite Bubbles

See the Pen <a href="https://codepen.io/JuanFuentes/pen/jONVOOL"> Pixi Sprite Bubbles</a> by Juan Fuentes (<a href="https://codepen.io/JuanFuentes">@JuanFuentes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Juan Fuentes
Source: Code / Demo
Created on: AUGUST 21, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

21. Bubble background animation

See the Pen <a href="https://codepen.io/diyorbek0309/pen/mdwbEve"> Bubble background animation</a> by Diyorbek Olimov (<a href="https://codepen.io/diyorbek0309">@diyorbek0309</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Diyorbek Olimov
Source: Code / Demo
Created on: AUGUST 21, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Bubble Game (pure CSS)

See the Pen <a href="https://codepen.io/jkantner/pen/PzXjYa"> Bubble Game (pure CSS)</a> by Jon Kantner (<a href="https://codepen.io/jkantner">@jkantner</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jon Kantner
Source: Code / Demo
Created on: AUGUST 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS)

23. Random moving bubbles

See the Pen <a href="https://codepen.io/bajzarpa/pen/woYNXp"> Random moving bubbles</a> by Arpad Bajzath (<a href="https://codepen.io/bajzarpa">@bajzarpa</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Arpad Bajzath
Source: Code / Demo
Created on: FEBRUARY 28, 2028
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(stylus)

24. Pure CSS – animated Bubble and Mac

See the Pen <a href="https://codepen.io/samarkandiy/pen/nmdEmo"> Pure CSS – animated Bubble and Mac</a> by Avaz Bokiev (<a href="https://codepen.io/samarkandiy">@samarkandiy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Avaz Bokiev
Source: Code / Demo
Created on: AUGUST 7, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Sparkling Water

See the Pen <a href="https://codepen.io/supah/pen/qRZyLv"> Sparkling Water</a> by Fabio Ottaviani (<a href="https://codepen.io/supah">@supah</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fabio Ottaviani
Source: Code / Demo
Created on: JANUARY 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

26. W3 Lightness – Bubble

See the Pen <a href="https://codepen.io/theunnamedrd/pen/dyRqqej"> Code Pen Sept Challenge W3 Lightness – Bubble </a> by theUnnamedRd (<a href="https://codepen.io/theunnamedrd">@theunnamedrd</a>) on <a href="https://codepen.io">CodePen</a>. Author: theUnnamedRd
Source: Code / Demo
Created on: SEPTEMBER 24, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)