25+ CSS Blob Effects

A curated collection of the top free HTML and CSS blob effects code examples sourced from reliable platforms like CodePen and GitHub. These stylish and unique blob effects are mainly used in web development to create organic, fluid shapes resembling blobs or liquid forms on webpages.

Each blob effect is carefully selected and comes with a unique design that aims to help web designers, front-end developers, and UX/UI designers. It enhances a webpage’s visual appeal by highlighting certain elements, drawing attention to specific content or sections, and adding depth and interest to the overall layout.

We have a wide array of blob effects ranging from simple to advanced and animated blob effects, helping you make websites more visually interesting and engaging, helping them stand out from competitors, and staying ahead in design terms.

Let’s check out our hand-picked collection of the best 25+ CSS blob effects to create dynamic and engaging user experiences.

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