Collection of free HTML and CSS blob effect code examples from codepen and other resources. Update of March 2019 collection. 3 new items.
Related Articles
Links
Made with
- HTML / CSS (SCSS)
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: -
Links
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: -
Links
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: -
Links
Made with
- HTML (Pug) / CSS (Stylus)
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: -
Links
Made with
- HTML (Pug) / CSS (SCSS)
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: -
Links
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: -
Links
Made with
- HTML / CSS
About the code
Dashing Blob Ball
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML (Pug) / CSS (SCSS) / JavaScript
About the code
Animated Blob Cursor
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Border Radius Blob
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS
About the code
Morphing Blob
CSS only morphing blob.
Compatible browsers: Chrome, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
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: -
Links
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: -
Links
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: -
Links
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: -
Links
Made with
- HTML / CSS (SCSS)
About the code
CSS-only Blob Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -