25+ CSS Blob Effects – Free Code + Demos

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

Author Brandon Cash

Made with HTML/CSS