25+ CSS Blob Effects - Free Code + Demos
Collection of 25+ CSS Blob Effects. All items are 100% free and open-source.
1. Blobs, Grids And VWs – Bloc 19.02.27 Group Session
Demo on explicit placement on a grid with blobs and viewport units.
Author: Juan Pablo (jupago)
Links: Source Code / Demo
Created on: February 27, 2019
Made with: HTML, CSS
Tags: grid, blob, abril, vw
2. Animated Blobs Text - Multiple Colors
Animated Blobs Text by using only CSS.
Author: Amli (uzcho_)
Links: Source Code / Demo
Created on: February 25, 2019
Made with: HTML, CSS
Tags: codepenchallenge, cpc-blob, pattern-text, gradient-text, text-effect
3. An Animated Blobby Gooey Button
it's just a button though. disclaimer: works in chrome. not sure about other browsers
Author: Leena Lavanya (leenalavanya)
Links: Source Code / Demo
Created on: February 20, 2019
Made with: HTML, SCSS
Tags: cpc-blob, codepenchallenge
4. Dashing Blob Ball
Created for the February 2019 CodePen Challenge
Author: sasi jj (sasi-jj)
Links: Source Code / Demo, Dribbble Shot
Created on: February 19, 2019
Made with: HTML, CSS
Tags: codepenchallenge, cpc-blob, blob, dashing circle
5. Animated Blob Cursor
Author: Mark (defaultclass)
Links: Source Code / Demo
Created on: February 19, 2019
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: cpc-blob, codepenchallenge blob css, css blob effect, animated blob
6. CSS Only Morphing Blob
Author: Monica Dinculescu (notwaldorf)
Links: Source Code / Demo
Created on: January 23, 2019
Made with: HTML, CSS
7. Pure CSS Card UI
Author: Adam Kuhn (cobra_winfrey)
Links: Source Code / Demo
Created on: June 4, 2018
Made with: Haml, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: codepenchallenge, card, ui, gooey, toggles
8. CSS / SVG Blobby Background
Just for fun. Playing with svg filters and masks, CSS for animation. https://unsplash.com/photos/RnCPiXixooY
Author: Cassie Evans (cassie-codes)
Links: Source Code / Demo, Unsplash.com
Created on: April 4, 2018
Made with: HTML, SCSS
Tags: blobby, goo, svg-filters, css
9. Draggable Blob
Experimented with sass collections and how they can be used for dynamic animations. I had fun making this Hope you enjoy. :)
Author: Marjo Sobrecaray (maaarj)
Links: Source Code / Demo
Created on: April 17, 2017
Made with: HTML, SCSS, JS
Tags: goo, animation, colorful, fun, blob
10. CSS-only Blob Animation
Author: Marcos Silva (marcossilva)
Links: Source Code / Demo
Created on: February 13, 2017
Made with: HTML, SCSS
11. Social Card Hover 4
Author: Adam Dipinto (AdamDipinto)
Links: Source Code / Demo
Created on: November 28, 2019
Made with: HTML, CSS
12. Fancy Border Radius
Author: Jessica Aiskel (Ninaiskel)
Links: Source Code / Demo
Created on: October 4, 2019
Made with: HTML, SCSS
Tags: css, border-radius
13. Processing Blobs
Processing Blobs
Author: Juan Fuentes (JuanFuentes)
Links: Source Code / Demo
Created on: April 23, 2019
Made with: HTML, CSS
Tags: processing, blobs, pantone, red, polygons
14. Blob Animation
Inspired by Pen http://codepen.io/heavenlypeach/pen/LVoZvg
Author: Meilan (Meilan)
Links: Source Code / Demo
Created on: August 19, 2015
Made with: HTML, SCSS
Tags: orbiting circle rorating animation
15. Animated SVG Blobs
Exploring svg animations and filters. Inspired by http://codepen.io/zessx/details/GgPomq/
Author: Lentie Ward (lentilz)
Links: Source Code / Demo
Created on: August 17, 2016
Made with: HTML, SCSS
Tags: svg, svg-animation, svg-filter, gooey
16. Bouncing Liquid Loader
Author: Fabio Ottaviani (supah)
Links: Source Code / Demo
Created on: December 3, 2015
Made with: HTML, SCSS
Tags: gooey, codecember, loader, liquid, svg-filter
17. Randomly Generated CSS Lava Lamp
This weeks CodePenChallenge is all about blobs. I figured I'd have a go at the lava lamp as an opportunity to try out gooey filters 👍 The blob characteristics are randomly generated on each load via random CSS variables passed inline through the markup. This means you'll get a different ...Read More
Author: Jhey (jh3y)
Links: Source Code / Demo
Created on: February 24, 2019
Made with: Pug, Stylus, Babel
CSS Pre-processor: Stylus
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: codepenchallenge, animation, svg-filter, goo, cpc-blob
18. Blended Photo & Gradient Blob Animation
Blended Photo & Gradient Blob Animation. An animation using border-radius and unsplash image with SCSS, Pug. #cpc-blob #codepenchallenge View on Dribbble: https://dribbble.com/shots/6073116-Blended-Photo-Gradient-Blob-Animation
Author: Mark (markmiscavage)
Links: Source Code / Demo
Created on: February 20, 2019
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: animation, blob, gradient, cpc-blob, codepenchallenge
19. Blob Effect
Author: Mikhail (fagcinsk)
Links: Source Code / Demo
Created on: June 2, 2016
Made with: Pug, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: css3 blob svg filter
20. Liquid Animation Effect
Author: Samuel Coles (samuelcoles)
Links: Source Code / Demo
Created on: December 14, 2017
Made with: HTML, SCSS
21. Pure Css Blob Animation
Author: TH. (TH-)
Links: Source Code / Demo
Created on: July 20, 2018
Made with: Pug, SCSS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: purecss css blob animation
More Awesome Lists:
Share: