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

Author Liliya
Made with HTML/CSS
BLOB button scss

Author chris
Made with HTML/SCSS
BLOB party

Author Joshua van Boxtel
Made with HTML/SCSS/JS
glowing rainbow blobs

Author Lea Rosema
Made with HTML/SCSS/JS
Gooey Eclipse

Author William A. | Keyon
Made with HTML/SCSS
blended photo & gradient blob

Author Mark
Made with HTML/SCSS
blobby

Author Kris Bocz
Made with HTML/CSS
Liquefied, gooey blobs from space – no libraries

Author Oliver
Made with HTML/CSS/Javascript
Codevember – Day 1 – Galaxy

Author alexandrejosephdev
Made with HTML/CSS/Javascript
Cosmic Blobs [PixiJS]

Author Devamardeep Hayatpur
Made with HTML/CSS/Javascript
Floaty Blobs

Author Colin
Made with HTML/CSS/Javascript
3d paper cut style with Pixi.js

Author Fabio Ottaviani
Made with HTML/CSS/Javascript
Generative Gradient Blobs

Author Yoav Kadosh
Made with CSS/Javascript
Background blob transform

Author Oracle
Made with HTML/CSS/Javascript
Animated Blob

Author Yash
Made with HTML/CSS/Javascript
Dashing blob ball

Author sasi jj
Made with HTML/CSS
Pure CSS Gooey Morph (single div)

Author Piotr Galor
Made with HTML/CSS
An Animated Blobby Gooey Button

Author Leena Lavanya
Made with HTML/CSS
Blob Animation And Glassmorphism with CSS

Author TheDevEnv
Made with HTML/CSS
Animated blob SVG text clipping effect – Pt. 6

Author Zach Saucier
Made with HTML/CSS/JAVASCRIPT
Animated Blob Svg

Author Vikas Patel
Made with HTML
SVG interactive blobs

Author Kevin Levron
Made with HTML/CSS/JAVASCRIPT
Blobs!

Author James Thomson
Made with HTML/CSS
SMIL + CSS Animated Morphing & Color Changing SVG Blob

Author Nikki Pantony
Made with HTML/CSS
Goo Loader

Author Elior Tabeka
Made with HTML/CSS
SCSS Rorschach mask
