24+ CSS Blob Effects

Last Updated on by in CSS Examples
Animated Blob Cursor

Are you looking for an innovative collection of 24+ CSS blob effects to create organic, blob-like shapes or fluid animations on a webpage? Well, you’re in luck!

In this compilation, we are featuring cutting-edge free HTML and CSS blob effects code examples that we have accumulated from authentic platforms like CodePen, GitHub, and more. Incorporating CSS blob effects adds depth and dimension to graphic design, creating organic and visually striking elements.

No matter if you are looking to add a sense of fascination to creating dynamic web pages or someone who wants to revolutionise your web project, our curated compilation offers innovative ways to craft fluid and dynamic digital interfaces.

Blob effects add a touch of uniqueness to web elements such as menu bars, buttons, text, titles, backgrounds, illustrations, etc. Each CSS blob effect is carefully selected and easy to customise. You can tweak the animation, colour, size, look, and feel of each and every item in our blob effects collection, resulting in unique and fluid design options that help you build visually stunning and immersive layouts.

Whether you’re looking for liquid animated effects, aesthetically pleasing blob checkboxes, or simple yet interactive blob SVGs, we have a wide array of options to serve all. Elevating visual aesthetics by incorporating fluid and dynamic shapes that captivate the viewer’s attention.

No matter If you’re a web designer, UI/UX designer, graphic designer, digital artist, or developer, you can use these CSS blob effects code snippets for your website design, user interface design, digital art projects, interactive media, and creative advertising campaigns. Each item offers unforgettable, cohesive, and immersive digital experiences. 

All blob effects examples are up-to-date, 100% free, open-source, and responsive; these items work perfectly on every screen size and browser. Let’s explore this eye-catching, hand-picked blob effects collection and captivate your audience.

01. Animated Blob Cursor

See the Pen
Animated Blob Cursor
by Mark Mead (@markmead)
on CodePen.

Author: Mark Mead @markmead
Links: Source Code / Demo
Created on: February 19, 2019
Made with: HTML, CSS, SCSS

02. Blob Effect

See the Pen
My First Blob Effect
by Awake (@awakelanka)
on CodePen.

Author: Awake @awakelanka
Links: Source Code / Demo
Created on: February 27, 2019
Made with: HTML, CSS, SCSS

03. ‘M Blob’ Logo – Rough Concept

See the Pen
‘M blob’ logo – rough concept
by Will (@wiiiiilllllll)
on CodePen.

Author: Will @wiiiiilllllll
Links: Source Code / Demo
Created on: November 11, 2014
Made with: HTML, CSS, SCSS

04. Pure CSS Blob Effect

See the Pen
Pure CSS blob effect – 0 html element
by Temani Afif (@t_afif)
on CodePen.

Author: @t_afif
Links: Source Code / Demo
Created on: June 26, 2021
Made with: HTML, CSS

05. CSS Blob Checkbox

See the Pen
CSS blob checkbox
by Temani Afif (@t_afif)
on CodePen.

Author: @t_afif
Links: Source Code / Demo
Created on: April 08, 2022
Made with: HTML, CSS

06. Blob Effect

See the Pen
Blob effect
by Mikhail (@fagcinsk)
on CodePen.

Author: Mikhail @fagcinsk
Links: Source Code / Demo
Created on: June 02, 2016
Made with: HTML(Pug), CSS(Less)

07. SVG Blob Mask

See the Pen
SVG blob mask
by Louis Boudet (@louisboudet)
on CodePen.

Author: Louis Boudet @louisboudet
Links: Source Code / Demo
Created on: July 10, 2019
Made with: HTML, CSS, JS

08. Pure CSS Gooey Morph (Single Div)

See the Pen
Pure CSS Gooey Morph (single div)
by Piotr Galor (@pgalor)
on CodePen.

Author: @pgalor
Links: Source Code / Demo
Created on: October 15, 2018
Made with: HTML, CSS

09. SVG Blob Mask

See the Pen
SVG blob mask
by Mark (@markus8585)
on CodePen.

Author: Mark @markus8585
Links: Source Code / Demo
Created on: June 26, 2019
Made with: HTML, CSS, JS

10. CSS Only Morphing Blob

See the Pen
CSS only morphing blob
by Monica Dinculescu (@notwaldorf)
on CodePen.

Author: Monica Dinculescu @notwaldorf
Links: Source Code / Demo
Created on: January 24, 2019
Made with: HTML, CSS

11. Blob Effect

See the Pen
Blob Effect
by Fabrizio Calderan (@fcalderan)
on CodePen.

Author: Fabrizio Calderan @fcalderan
Links: Source Code / Demo
Created on: March 22, 2022
Made with: HTML, CSS

12. Border Radius Blob

See the Pen
Border radius blob
by Kari Sabine Malmin (@karisabinemalmin)
on CodePen.

Author: Kari Sabine Malmin @karisabinemalmin
Links: Source Code / Demo
Created on: February 13, 2019
Made with: HTML, CSS, SCSS

13. SVG Blob Mask

See the Pen
SVG blob mask
by Mihael Miklošić (@mihael-mikloi)
on CodePen.

Author: Mihael Miklošić @mihael-mikloi
Links: Source Code / Demo
Created on: May 28, 2019
Made with: HTML, CSS, JS

14. CSS / SVG Blobby Background

See the Pen
CSS / SVG Blobby Background
by Cassie Evans (@cassie-codes)
on CodePen.


Author: Cassie Evans @cassie-codes
Links: Source Code / Demo
Created on: April 04, 2018
Made with: HTML, CSS, SCSS

15. Dashing Blob Ball

See the Pen
Dashing blob ball
by sasi jj (@sasi-jj)
on CodePen.


Author: sasi jj @sasi-jj
Links: Source Code / Demo
Created on: February 19, 2019
Made with: HTML, CSS

16. Ink Blob Effect

See the Pen
ink blob effect
by shotaCoffee (@shota_Coffee)
on CodePen.

Author: shotaCoffee @shota_Coffee
Links: Source Code / Demo
Created on: June 19, 2019
Made with: HTML, CSS, SCSS

17. Rotating Blob Animation CSS

See the Pen
rotating blob animation css
by Kiran Raj (@slashback)
on CodePen.


Author: Kiran Raj @slashback
Links: Source Code / Demo
Created on: November 30, 2019
Made with: HTML, CSS

18. An Animated Blobby Gooey Button

See the Pen
An Animated Blobby Gooey Button
by Leena Lavanya (@leenalavanya)
on CodePen.

Author: Leena Lavanya @leenalavanya
Links: Source Code / Demo
Created on: February 20, 2019
Made with: HTML, CSS, SCSS

19. Blob Effect – Color Change on Hover

See the Pen
Blob Effect – Color Change on Hover
by Alinia Mabatid (@alinialoriz)
on CodePen.

Author: Alinia Mabatid @alinialoriz
Links: Source Code / Demo
Created on: May 02, 2019
Made with: HTML, CSS, JS

20. Animated Blobs Text – Multiple Colors

See the Pen
Animated Blobs Text – Multiple Colors
by Amli (@uzcho_)
on CodePen.

Author: Amli @uzcho_
Links: Source Code / Demo
Created on: February 25, 2019
Made with: HTML, CSS

21. The Blob II

See the Pen
The Blob II
by Temani Afif (@t_afif)
on CodePen.


Author: @t_afif
Links: Source Code / Demo
Created on: January 06, 2022
Made with: HTML, CSS

22. Draggable Blob

See the Pen
Draggable blob
by Marjo Sobrecaray (@maaarj)
on CodePen.


Author: Marjo Sobrecaray @maaarj
Links: Source Code / Demo
Created on: April 17, 2017
Made with: HTML, CSS,SCSS, JS

23. Blobbing Effect

See the Pen
Blobbing Effect
by Juanjo Rivera (@JuanjoVlado)
on CodePen.

Author: Juanjo Rivera @JuanjoVlado
Links: Source Code / Demo
Created on: May 14, 2018
Made with: HTML, CSS

24. Animated Blobs

See the Pen
Animated Blobs
by Shrinath Prabhu (@shrinathprabhu)
on CodePen.

Author: Shrinath Prabhu @shrinathprabhu
Links: Source Code / Demo
Created on: May 19, 2021
Made with: HTML, CSS

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

See the Pen
Blobs, Grids and VWs – Bloc 19.02.27 Group Session
by Juan Pablo (@jupago)
on CodePen.


Author: Juan Pablo @jupago
Links: Source Code / Demo
Created on: February 28, 2019
Made with: HTML, CSS