Post thumbnail: 10 CSS Blob Effects

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