A collection of 13 different free blob effects using HTML & CSS.
of 13Footer with Gooey Background effect
Want to create a beautiful background image for your website? With CSS Gooey, you can easily do so. Start creating now!
See the Pen CSS Goey footer by Zed Dash (@z-) on CodePen.
02 of 13Animated Gooey Hover Menu Using HTML5 and CSS
SVG Gooey Hover Menu is an animated menu concept using HTML5 and CSS. It has a gooey effect when hovering over the links.
See the Pen SVG Gooey Hover Menu Concept by Michael Leonard (@mikel301292) on CodePen.
03 of 13Create Your Own Blobby Background with CSS or SVG
We’ll be creating a blobby background using an SVG file. Uses SVG path manipulation based on mouse position to ‘chase’ the user’s position
See the Pen CSS / SVG Blobby Background by Cassie Evans (@cassie-codes) on CodePen.
04 of 13Border Radius & Image Gradient Experiment
Border Radius & Image Gradient Experiment. Using SCSS, Pug. Animation of border-radius and using mix-blend-mode on unsplash image.
See the Pen Border Radius & Image Gradient Experiment by Mark (@markmiscavage) on CodePen.
05 of 13Create an Animated Blobby Gooey Button for your website or blog
An animated blobby gooey button is a great way to add some fun to your site. It’s easy to create and customize.
See the Pen An Animated Blobby Gooey Button by Leena Lavanya (@leenalavanya) on CodePen.
Disclaimer: works in chrome. not sure about other browsers
06 of 13SVG Blobs With Mask And Filter Effects
SVG blob using CSS filters and masks. We’ll also add some animation effects to give our blobs a little more personality.
See the Pen SVG blob mask by Dimitra Vasilopoulou (@mimikos) on CodePen.
07 of 13Animated Blob Effects with CSS or SVG Background Image
You’ll be amazed at what you can do with just a few lines of code.
See the Pen Blob Effect by Fabrizio Calderan (@fcalderan) on CodePen.
08 of 13CSS Gooey/Blob Effects
Create a gooey blob effect using just CSS.
See the Pen Gooey/blob effect with CSS only by michiel (@michiel-huiskens) on CodePen.
09 of 13Blobby Water Molecules With CSS And HTML5
creating a blobby water molecule using CSS and HTML5. We’ll also be adding some animation effects to give our water molecules more life.
See the Pen Blobby water molecule by Melanie Burger (@melaniebrgr) on CodePen.
10 of 13CSS3 Click Animation Blob Effect
Want to create an awesome CSS3 animation Blob effects on your site? Then find the demo and code below! It will help you understand how to add a CSS animation blob effect to your website using CSS3.
See the Pen CSS3 click blob effect by Jonathan Vella (@gannivella) on CodePen.
11 of 13CSS Blob Effect Without Using Any HTML Elements
We’ll show you how to create an awesome CSS blob effect without using any HTML elements.
See the Pen Pure CSS blob effect – 0 html element by Temani Afif (@t_afif) on CodePen.
12 of 13Add CSS Blob Effect to Your Stepper Buttons
CSS blobs are an easy way to create unique effects on your website. They’re also very useful when creating custom buttons or icons. we’ll show you how to add CSS blobs to your stepper buttons.
See the Pen Blob effect by Mikhail (@fagcinsk) on CodePen.
of 13Ink blob effect for footer
Ink blob effect for footer using CSS and JavaScript
See the Pen ink blob effect by shotaCoffee (@shota_Coffee) on CodePen.
Discussion about this post