15 CSS Blob Effects

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: -

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: -

About the code

Animated Blobs Text - Multiple Colors

Animated blobs text by using only CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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: -

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: -

About the code

An Animated Blobby Gooey Button

it's just a button though.

Compatible browsers: Chrome, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Dashing Blob Ball

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

Responsive: no

Dependencies: -

About the code

Animated Blob Cursor

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

Responsive: yes

Dependencies: -

About a code

Border Radius Blob

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

Responsive: no

Dependencies: -

About the code

Morphing Blob

CSS only morphing blob.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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: -

About the code

Pure CSS Card UI

Pure CSS cards with blob effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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: -

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: -

About the code

CSS-only Blob Animation

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

Responsive: no

Dependencies: -