30 CSS Blob Effects

Welcome to our curated collection of CSS Blob Effects! This article showcases a variety of innovative CSS techniques that can help you create unique and organic shapes for your web designs. Whether you want to add a whimsical touch to your illustrations or create captivating backgrounds, these blob effects will surely make your designs stand out.

Update of February 2024 collection: We are excited to announce the addition of 6 new items to our collection, providing you with more options to explore and experiment with the latest trends in CSS blob effects. Stay ahead of the curve and create cutting-edge designs with these new additions.

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

Let’s dive in and discover the possibilities of CSS blob effects together!

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 like –_gap and –_color for consistent spacing and color. The content div has a border, padding, and border-radius for rounded corners, and uses Grid Layout for centering its contents. The blob div has an animation that creates a dynamic, moving background effect.

Pure CSS Blob Animation

The CSS includes properties to style HTML elements, using calc() to calculate values, mix-blend-mode for blending colors and images, and animation for creating animations.

CSS Blobs

The HTML contains a container div with circle divs and an h1 element displaying “CSS BLOB”. The h1 element has text-shadow for a glowing effect against a dark background. Each circle is styled with different border properties to create a layered effect. Two keyframes animations, morph and scaleIn, are used to transform the shape and size of the circles over time. Responsive design.

CSS Blob Maker

The HTML code defines a blob div and a button for triggering transformations. The CSS styles the blob and button using border-radius for the shape and transform for rotation. JavaScript generates random values for the blob’s properties each time the button is clicked, resulting in a unique transformation.

One div Orb

The HTML structure includes a single div element with background properties using multiple gradients for a layered color effect. The div is made circular using border-radius. A keyframes animation named warp rotates the div gently back and forth.

Pure CSS Three Red Blobs

The HTML structure consists of a parent div with three child divs, each with unique animations and colors. The animations move the blobs in circular paths, blending colors with the background image for a visually appealing effect. Responsive design.

About a code

CSS Blob Checkbox

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

Responsive: no

Dependencies: –

About a code

Blob Effect

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

Responsive: yes

Dependencies: –

About a code

The Blob II

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

Responsive: no

Dependencies: –

About a code

DRop

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

Responsive: no

Dependencies: –

About a code

Blob Animation And Glassmorphism with CSS

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

Responsive: yes

Dependencies: –

About a code

RGB Blob Preloader

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

Responsive: yes

Dependencies: –

About a code

Pure CSS Blob Effect. 0 HTML Element

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

Responsive: yes

Dependencies: –

About a code

Animated Blobs

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

Responsive: yes

Dependencies: –

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, resulting in a different lamp on each load.

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

Responsive: no

Dependencies: –

About a code

Blended Photo & Gradient Blob Animation

Blended photo & gradient blob animation using border-radius, opacity, and transforms with SCSS and Pug.

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

Responsive: no

Dependencies: –

About the code

An Animated Blobby Gooey Button

Experiment with an animated blobby gooey button.

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 a code

Border Radius Blob

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

Responsive: no

Dependencies: –

About the code

Morphing Blob

A CSS-only morphing blob effect.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: –

About a code

Pure CSS Gooey Morph

An animation using border-radius, opacity, and transforms to create a gooey morph effect without SVG.

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

Responsive: no

Dependencies: –

About the code

CSS / SVG Blobby Background

An experiment with SVG filters and masks along with CSS for animation effects.

Compatible browsers: Chrome, Firefox (partial), Opera, Safari

Responsive: yes

Dependencies: –

Source link

Tags: Blobcsseffects