Collection of free HTML and CSS blob effect code examples.

10 CSS Blob Effects

Collection of free HTML and CSS blob effect code examples.

Related Articles

  1. CSS Ripple Effects

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

  • 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

  • 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

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

back to top