Welcome to our curated collection of CSS Blob Effects! In this article, we have compiled a selection of innovative and eye-catching CSS techniques that will help you create unique and organic shapes on your web designs. Whether you are looking to add a touch of whimsy to your illustrations or create dynamic backgrounds that capture attention, these blob effects are sure to make your designs stand out.

Update of February 2024 collection: We are thrilled to announce that we have expanded our collection with 6 new items, bringing you even more possibilities to explore and experiment with. These new additions showcase the latest trends and techniques in CSS blob effects, allowing you to stay ahead of the curve and create cutting-edge designs.

Each blob effect in this collection offers a range of customization options, allowing you to adjust the shape, color, and animation to suit your specific needs. Whether you prefer smooth and flowing blobs or more jagged and abstract shapes, you will find a variety of options to choose from.

Let's dive in and explore the possibilities of CSS blob effects together!

Related Articles

  1. CSS Bubbles

Floating Blob Designs with Gradient and Neon

The HTML code is structured with a div container that includes a div for content and a div for a blob animation. The CSS code uses variables, such as --_gap and --_color, for consistent spacing and color throughout the design. The content div has a border, padding, and a border-radius for rounded corners. It also uses a Grid Layout to center its contents. The blob div has an animation applied to it, which creates a dynamic, moving background effect.

Pure CSS Blob Animation

The CSS includes a variety of properties to style the HTML elements. Notably, it uses the calc() function to calculate values for various properties, mix-blend-mode for blending colors and images, and animation for creating animations.

CSS Blobs

The HTML consists of a container div that holds multiple circle divs and an h1 element displaying the text “CSS BLOB”. The h1 element is styled with text-shadow to give it a glowing effect against the dark background. Each circle is styled with different border colors, widths, and opacities to create a layered effect. Two keyframes animations, morph and scaleIn, are used. morph changes the border-radius property to transform the shape of each circle over time, while scaleIn scales up the circles from 0.25x to 4.5x their original size. Responsive.

CSS Blob Maker

The HTML code defines the basic structure of the webpage, including a div for the blob and a button to trigger the transformation. The CSS provides the styling for the blob and the button. Notably, it uses the border-radius property to create the blob’s shape and the transform property to rotate it. The JavaScript code defines a function that generates random values for the border-radius and transform properties every time the button is clicked, resulting in a unique transformation of the blob’s shape and orientation.

One div Orb

The HTML structure is quite simple, consisting of a single div element within the body. The background property of both the body and div elements uses multiple linear-gradient and radial-gradient functions to create a complex and layered color effect. These gradients transition smoothly between various shades of blue, turquoise, and purple. The border-radius property is used to make the div element circular. A keyframes animation named warp is applied to the div element, causing it to rotate gently back and forth.

Pure CSS Three Red Blobs

The HTML structure is simple yet effective. It consists of a parent div with the class container, which encapsulates another div with the class blobs. Inside blobs, there are three more div elements, each with the class blob and an additional class (a, b, or c). This hierarchical structure allows for complex styling and animation effects. The .blob class applies a blur filter and a mix-blend-mode of multiply, creating an interesting visual effect. Each blob (a, b, c) has a unique animation and color mix. The circular and circular2 animations move the blobs in a circular path. The $R variable controls the radius of this path. mix-blend-mode blends the colors of the blobs and the background image, creating a visually appealing effect. Responsive.

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

CSS Blob Checkbox

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Fabrizio Calderan

Made with

  • HTML / CSS

About a code

Blob Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Blob II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: DRop

Author

  • NANOUU

Made with

  • HTML / CSS

About a code

DRop

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • TheDevEnv

Made with

  • HTML / CSS

About a code

Blob Animation And Glassmorphism with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

RGB Blob Preloader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

Pure CSS Blob Effect. 0 HTML Element

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Shrinath Prabhu

Made with

  • HTML / CSS

About a code

Animated Blobs

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Colleen Lohr

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

Author

  • Adam Dipinto

Made with

  • HTML / CSS

About a code

Social Card Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

  • Jhey

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

Author

  • Mark

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

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

  • Kari Sabine Malmin

Made with

  • HTML / CSS (SCSS)

About a code

Border Radius Blob

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

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

  • Piotr Galor

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

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