Blob effects in CSS involve creating irregular, organic shapes, often resembling liquid or amoeba-like forms. These effects are achieved using CSS properties like border-radius
and clip-path
. Blobs can be used for various purposes in web design, adding a playful and modern touch to the visual elements on a website.
Welcome to our collection of 25+ CSS Blob Effects! In this article, we have selected a range of free Blob Effects from platforms like Code Pen.
BLOB shapes
![](https://codeymaze.com/wp-content/uploads/2023/08/image-57.png)
Author Liliya
Made with HTML/CSS
BLOB button scss
![](https://codeymaze.com/wp-content/uploads/2023/08/image-58.png)
Author chris
Made with HTML/SCSS
BLOB party
![](https://codeymaze.com/wp-content/uploads/2023/08/image-59.png)
Author Joshua van Boxtel
Made with HTML/SCSS/JS
glowing rainbow blobs
![](https://codeymaze.com/wp-content/uploads/2023/08/image-60-1024x638.png)
Author Lea Rosema
Made with HTML/SCSS/JS
Gooey Eclipse
![](https://codeymaze.com/wp-content/uploads/2023/08/image-62.png)
Author William A. | Keyon
Made with HTML/SCSS
blended photo & gradient blob
![](https://codeymaze.com/wp-content/uploads/2023/08/image-63.png)
Author Mark
Made with HTML/SCSS
blobby
![](https://codeymaze.com/wp-content/uploads/2023/08/image-64.png)
Author Kris Bocz
Made with HTML/CSS
Liquefied, gooey blobs from space – no libraries
![](https://codeymaze.com/wp-content/uploads/2023/09/image-1.png)
Author Oliver
Made with HTML/CSS/Javascript
Codevember – Day 1 – Galaxy
![](https://codeymaze.com/wp-content/uploads/2023/09/image-2.png)
Author alexandrejosephdev
Made with HTML/CSS/Javascript
Cosmic Blobs [PixiJS]
![](https://codeymaze.com/wp-content/uploads/2023/09/image-3-1024x585.png)
Author Devamardeep Hayatpur
Made with HTML/CSS/Javascript
Floaty Blobs
![](https://codeymaze.com/wp-content/uploads/2023/09/image-4-1024x760.png)
Author Colin
Made with HTML/CSS/Javascript
3d paper cut style with Pixi.js
![](https://codeymaze.com/wp-content/uploads/2023/09/image-6-1024x663.png)
Author Fabio Ottaviani
Made with HTML/CSS/Javascript
Generative Gradient Blobs
![](https://codeymaze.com/wp-content/uploads/2023/09/image-77.png)
Author Yoav Kadosh
Made with CSS/Javascript
Background blob transform
![](https://codeymaze.com/wp-content/uploads/2023/09/image-8-1024x621.png)
Author Oracle
Made with HTML/CSS/Javascript
Animated Blob
![](https://codeymaze.com/wp-content/uploads/2023/09/image-9-1024x654.png)
Author Yash
Made with HTML/CSS/Javascript
Dashing blob ball
![](https://codeymaze.com/wp-content/uploads/2023/09/image-10.png)
Author sasi jj
Made with HTML/CSS
Pure CSS Gooey Morph (single div)
![](https://codeymaze.com/wp-content/uploads/2023/09/image-12.png)
Author Piotr Galor
Made with HTML/CSS
An Animated Blobby Gooey Button
![](https://codeymaze.com/wp-content/uploads/2023/09/image-13-1024x512.png)
Author Leena Lavanya
Made with HTML/CSS
Blob Animation And Glassmorphism with CSS
![](https://codeymaze.com/wp-content/uploads/2023/09/image-14.png)
Author TheDevEnv
Made with HTML/CSS
Animated blob SVG text clipping effect – Pt. 6
![](https://codeymaze.com/wp-content/uploads/2023/09/image-18-1024x531.png)
Author Zach Saucier
Made with HTML/CSS/JAVASCRIPT
Animated Blob Svg
![](https://codeymaze.com/wp-content/uploads/2023/09/image-19.png)
Author Vikas Patel
Made with HTML
SVG interactive blobs
![](https://codeymaze.com/wp-content/uploads/2023/09/image-20-1024x668.png)
Author Kevin Levron
Made with HTML/CSS/JAVASCRIPT
Blobs!
![](https://codeymaze.com/wp-content/uploads/2023/09/image-21-1024x521.png)
Author James Thomson
Made with HTML/CSS
SMIL + CSS Animated Morphing & Color Changing SVG Blob
![](https://codeymaze.com/wp-content/uploads/2023/09/image-22.png)
Author Nikki Pantony
Made with HTML/CSS
Goo Loader
![](https://codeymaze.com/wp-content/uploads/2023/09/image-23.png)
Author Elior Tabeka
Made with HTML/CSS
SCSS Rorschach mask
![](https://codeymaze.com/wp-content/uploads/2023/09/image-24-1024x576.png)