w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Effects

13 Free Blob Effects Using CSS3

October 31, 2022
in Effects

You might also like

24 Free CSS Scroll Effect Examples

36 Free CSS 3D Text Effects

13 Beautiful CSS Button Hover Effects for Your Website

CSS in CSS with a lot of C and S

Box Shadow Patterns

Masked & Skewed

A collection of 13 different free blob effects using HTML & CSS.

01
of 13
Footer 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 13
Animated 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 13
Create 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 13
Border 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 13
Create 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 13
SVG 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 13
Animated 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 13
CSS 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 13
Blobby 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 13
CSS3 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 13
CSS 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 13
Add 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.

13
of 13
Ink 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.

Tags: Blob effectseffects
Previous Post

How To Increment Numbers Automatically In CSS Counters

Next Post

11 Websites for Web Developers that will help you learn web development

Related Stories

CSS Scroll Effects
Effects

24 Free CSS Scroll Effect Examples

November 23, 2022
Collection of Free CSS 3D Text Effects
Effects

36 Free CSS 3D Text Effects

November 11, 2022
Beautiful CSS Button Hover Effects
Effects

13 Beautiful CSS Button Hover Effects for Your Website

November 5, 2022
CSS in CSS with a lot of C and S
Effects

CSS in CSS with a lot of C and S

October 12, 2020
Box Shadow Patterns
Effects

Box Shadow Patterns

October 1, 2020
Masked & Skewed
Effects

Masked & Skewed

September 30, 2020
Fit Text with CSS Variables
Effects

Fit Text with CSS Variables

September 29, 2020
Buttons popper
Effects

Buttons popper

September 21, 2020

Discussion about this post

Follow Us

Popular Posts

100 Creative CSS Cards

44 Free Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

49 CSS Tables

20 HTML & CSS pricing tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

55 Useful handpicked CSS Buttons with examples and demos

89 Best CSS Toggle Switches

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools