Collection of free HTML and CSS blob effect code examples from codepen and other resources. Update of March 2019 collection. 3 new items.

Related Articles

  1. CSS Bubbles
  2. CSS Ripple Effects

Author

  • Colleen Lohr

Made with

  • HTML / CSS (SCSS)

About a code

Neuomorphism Trapped Animated Blob

This is an experiment with the checkbox. In version one this is a simple reveal animation upon check to show the animated blob.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Juan Pablo

Made with

  • HTML / CSS

About the code

Blobs, Grids and VWs

Demo on explicit placement on a grid with blobs and viewport units.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amli

Made with

  • HTML / CSS

About the code

Animated Blobs Text - Multiple Colors

Animated blobs text by using only CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

Randomly Generated CSS Lava Lamp

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 lamp on each load.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Mark

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

Blended Photo & Gradient Blob Animation

Blended photo & gradient blob animation. An animation using border-radius and unsplash image with SCSS, Pug.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Leena Lavanya

Made with

  • HTML / CSS (SCSS)

About the code

An Animated Blobby Gooey Button

it's just a button though.

Compatible browsers: Chrome, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • sasi jj

Made with

  • HTML / CSS

About the code

Dashing Blob Ball

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • MARK

Made with

  • HTML (Pug) / CSS (SCSS) / JavaScript

About the code

Animated Blob Cursor

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Kari Sabine Malmin

Made with

  • HTML / CSS (SCSS)

About a code

Border Radius Blob

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Monica Dinculescu

Made with

  • HTML / CSS

About the code

Morphing Blob

CSS only morphing blob.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Piotr Galor

Made with

  • HTML / CSS

About a code

Pure CSS Gooey Morph

SVG not involved. Animating primarily border-radius, plus some opacity and basic transforms.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Pure CSS Card UI

Pure CSS cards with blob effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Cassie Evans

Made with

  • HTML / CSS (SCSS)

About the code

CSS / SVG Blobby Background

Playing with SVG filters and masks, CSS for animation.

Compatible browsers: Chrome, Firefox (partial), Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Marjo Sobrecaray

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Draggable Blob

Experimented with Sass collections and how they can be used for dynamic animations.

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Marcos Silva

Made with

  • HTML / CSS (SCSS)

About the code

CSS-only Blob Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -