25+ CSS Blob Effects

A curated collection of free 25+ HTML and CSS blob effects code examples sourced from CodePen and GitHub for web designers, front-end developers, and UX/UI designers.

1. AI Assistant Blob

See the Pen <a href="https://codepen.io/aaroniker/pen/YoqNRB"> AI Assistant Blob</a> by Aaron Iker (<a href="https://codepen.io/aaroniker">@aaroniker</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Iker
Source: Code / Demo
Created on: JUNE 17, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

2. SVG blob mask

See the Pen <a href="https://codepen.io/mimikos/pen/oWJjYZ"> SVG blob mask</a> by Dimitra Vasilopoulou (<a href="https://codepen.io/mimikos">@mimikos</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dimitra Vasilopoulou
Source: Code / Demo
Created on: MAY 22, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

3. Blob

See the Pen <a href="https://codepen.io/shubniggurath/pen/EmMzpp"> Blob</a> by Liam Egan (<a href="https://codepen.io/shubniggurath">@shubniggurath</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Liam Egan
Source: Code / Demo
Created on: MAY 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

4. Blob Experiment

See the Pen <a href="https://codepen.io/vcomics/pen/ZwNgvX"> Blob Experiment</a> by Victor Vergara (<a href="https://codepen.io/vcomics">@vcomics</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Victor Vergara
Source: Code / Demo
Created on: FEBRUARY 22, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JavaScript

5. Animated Morphing Blob Social Buttons (React + Tailwind)

See the Pen <a href="https://codepen.io/markmead/pen/GYXgPe"> Animated Morphing Blob Social Buttons (React + Tailwind)</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: OCTOBER 22, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

6. 60° Gradient Morphing Blob

See the Pen <a href="https://codepen.io/georgedoescode/pen/oNzamjV"> 60° Gradient Morphing Blob</a> by George Francis (<a href="https://codepen.io/georgedoescode">@georgedoescode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: George Francis
Source: Code / Demo
Created on: JANUARY 13, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. Blob

See the Pen <a href="https://codepen.io/hakimel/pen/DzmKrk"> Blob</a> by Hakim El Hattab (<a href="https://codepen.io/hakimel">@hakimel</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hakim El Hattab
Source: Code / Demo
Created on: JULY 9, 2012
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Random blob generator

See the Pen <a href="https://codepen.io/LekovicMilos/pen/omVzYv"> Random blob generator</a> by Milos Lekovic (<a href="https://codepen.io/LekovicMilos">@LekovicMilos</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Milos Lekovic
Source: Code / Demo
Created on: FEBRUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

9. CSS Blob Checkbox

See the Pen <a href="https://codepen.io/t_afif/pen/PoEebrz"> CSS blob checkbox</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: @t_afif
Source: Code / Demo
Created on: APRIL 08, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. SVG Blob Mask

See the Pen <a href="https://codepen.io/louisboudet/pen/QXzeZK"> SVG blob mask</a> by Louis Boudet (<a href="https://codepen.io/louisboudet">@louisboudet</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Louis Boudet
Source: Code / Demo
Created on: JULY 10, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

11. SVG Blob Mask

See the Pen <a href="https://codepen.io/markus8585/pen/WqZOpN"> SVG blob mask</a> by Mark (<a href="https://codepen.io/markus8585">@markus8585</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark
Source: Code / Demo
Created on: JUNE 26, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

12. Blob Effect

See the Pen <a href="https://codepen.io/fcalderan/pen/wvpzNVm"> Blob Effect</a> by Fabrizio Calderan (<a href="https://codepen.io/fcalderan">@fcalderan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Fabrizio Calderan
Source: Code / Demo
Created on: MARCH 22, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. CSS / SVG Blobby Background

See the Pen <a href="https://codepen.io/cassie-codes/pen/zWJxXj"> CSS / SVG Blobby Background</a> by Cassie Evans (<a href="https://codepen.io/cassie-codes">@cassie-codes</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Cassie Evans
Source: Code / Demo
Created on: APRIL 04, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

14. Border Radius Blob

See the Pen <a href="https://codepen.io/karisabinemalmin/pen/exjeym"> Border radius blob</a> by Kari Sabine Malmin (<a href="https://codepen.io/karisabinemalmin">@karisabinemalmin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kari Sabine Malmin
Source: Code / Demo
Created on: FEBRUARY 13, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

15. Dashing Blob Ball

See the Pen <a href="https://codepen.io/sasi-jj/pen/vbbbXW"> Dashing blob ball</a> by sasi jj (<a href="https://codepen.io/sasi-jj">@sasi-jj</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: sasi jj
Source: Code / Demo
Created on: FEBRUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Shapes – Animated Blobs

See the Pen <a href="https://codepen.io/taryne/pen/OdGwoe"> Shapes – Animated Blobs</a> by Taryn Ewens (<a href="https://codepen.io/taryne">@taryne</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Taryn Ewens
Source: Code / Demo
Created on: FEBRUARY 21, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

17. An Animated Blobby Gooey Button

See the Pen <a href="https://codepen.io/leenalavanya/pen/aXMXvz"> An Animated Blobby Gooey Button</a> by Leena Lavanya (<a href="https://codepen.io/leenalavanya">@leenalavanya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Leena Lavanya
Source: Code / Demo
Created on: FEBRUARY 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Blobs, Grids and VWs – Bloc 19.02.27 Group Session

See the Pen <a href="https://codepen.io/jupago/pen/EMjzNK"> Blobs, Grids and VWs – Bloc 19.02.27 Group Session</a> by Juan Pablo (<a href="https://codepen.io/jupago">@jupago</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Juan Pablo
Source: Code / Demo
Created on: FEBRUARY 28, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Animated Blob Cursor

See the Pen <a href="https://codepen.io/markmead/pen/ErMoKO"> Animated Blob Cursor</a> by Mark Mead (<a href="https://codepen.io/markmead">@markmead</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mark Mead
Source: Code / Demo
Created on: FEBRUARY 19, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

20. Rotating Blob Animation CSS

See the Pen <a href="https://codepen.io/slashback/pen/KKwPyZa"> rotating blob animation css</a> by Kiran Raj (<a href="https://codepen.io/slashback">@slashback</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kiran Raj
Source: Code / Demo
Created on: NOVEMBER 30, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Blob Effect – Color Change on Hover

See the Pen <a href="https://codepen.io/alinialoriz/pen/zXVmVJ"> Blob Effect – Color Change on Hover</a> by Alinia Mabatid (<a href="https://codepen.io/alinialoriz">@alinialoriz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Alinia Mabatid
Source: Code / Demo
Created on: May 02, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

22. Pure CSS Blob Effect

See the Pen <a href="https://codepen.io/t_afif/pen/OJpKeWa"> Pure CSS blob effect – 0 html element</a> by Temani Afif (<a href="https://codepen.io/t_afif">@t_afif</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: @t_afif
Source: Code / Demo
Created on: JUNE 26, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Blob Effect

See the Pen <a href="https://codepen.io/awakelanka/pen/ywyGVQ"> My First Blob Effect</a> by Awake (<a href="https://codepen.io/awakelanka">@awakelanka</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Awake
Source: Code / Demo
Created on: FEBRUARY 27, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. Pure CSS Blob Effect

See the Pen <a href="https://codepen.io/fagcinsk/pen/aZOozV"> Blob effect</a> by Mikhail (<a href="https://codepen.io/fagcinsk">@fagcinsk</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mikhail
Source: Code / Demo
Created on: JUNE 02, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Less)

25. Pure CSS Gooey Morph (Single Div)

See the Pen <a href="https://codepen.io/pgalor/pen/xyPGvJ"> Pure CSS Gooey Morph (single div)</a> by Piotr Galor (<a href="https://codepen.io/pgalor">@pgalor</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: @pgalor
Source: Code / Demo
Created on: OCTOBER 15, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

26. CSS only morphing blob

See the Pen <a href="https://codepen.io/notwaldorf/pen/omXwzw"> CSS only morphing blob</a> by Monica Dinculescu (<a href="https://codepen.io/notwaldorf">@notwaldorf</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Monica Dinculescu
Source: Code / Demo
Created on: JANUARY 24, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS