Collection of free HTML and CSS blob effect code examples.

  1. CSS Ripple Effects

Creator

  • Juan Pablo

Programming language

  • HTML / CSS

Information the code

Blobs, Grids and VWs

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Amli

Programming language

  • HTML / CSS

Information the code

Animated Blobs Text – Multiple Colors

Animated blobs text by using only CSS.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Leena Lavanya

Programming language

  • HTML / CSS (SCSS)

Information the code

An Animated Blobby Gooey Button

it’s just a button though.

Browser Support: Chrome, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • sasi jj

Programming language

  • HTML / CSS

Information the code

Dashing Blob Ball

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • MARK

Programming language

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

Information the code

Animated Blob Cursor

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Monica Dinculescu

Programming language

  • HTML / CSS

Information the code

Morphing Blob

CSS only morphing blob.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Adam Kuhn

Programming language

  • HTML (Haml) / CSS (SCSS)

Information the code

Pure CSS Card UI

Pure CSS cards with blob effect.

Browser Support: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Cassie Evans

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS / SVG Blobby Background

Playing with SVG filters and masks, CSS for animation.

Browser Support: Chrome, Firefox (partial), Opera, Safari

Responsive: yes

Dependencies:

Creator

  • Marjo Sobrecaray

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Draggable Blob

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

Browser Support: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Marcos Silva

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS-only Blob Animation

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: