10 CSS Blob Effects
Collection of free HTML and CSS blob effect code examples.
Related Articles
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 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 the code
Morphing Blob
CSS only morphing blob.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
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: -