How to create metaballs in CSS?

CSS metaballs use an SVG filter with feGaussianBlur and feColorMatrix. Place colored circles, apply the blur, then the color matrix with a high threshold to merge shapes where they overlap.

How to animate a blob in CSS?

Use border-radius with 8 values (e.g., 30% 70% 70% 30% / 30% 30% 70% 70%) and animate them with @keyframes. Each frame changes values to create organic movement. Add a slow rotation for more dynamism.

What is the difference between liquid and glassmorphism?

Glassmorphism creates a frosted glass effect (static, translucent). Liquid creates organic shapes that move and deform (dynamic, motion). Both can be combined for spectacular effects.

Are liquid animations performant?

CSS animations (border-radius, transform) are GPU-optimized. SVG filter effects (metaballs) are heavier — limit to 2-3 blobs. For complex effects, use canvas with requestAnimationFrame.

Can liquid effects be used on mobile?

Yes, by simplifying: reduce the number of blobs, use CSS animations rather than canvas, and lower the complexity of SVG filters. Test on a real device as performance varies.

Liquid & Morphing | Effect.Labs

How to create organic and fluid animations? These 30 liquid effects cover the most creative techniques: merging metaballs, shape morphing, animated blobs and dynamic waves. Perfect for adding a modern and lively touch to any website.

Metaballs

Organic blobs that merge together with a surface tension effect.

Canvas Animation Organic

Click to create ripples

Water Ripple

Realistic ripple effect simulated with wave propagation.

Canvas Interactive Physics

Liquid Button

Button with animated liquid fill effect on hover.

CSS Hover Button

LIQUID

Dripping Text

Text with a dripping effect that falls continuously.

CSS SVG Filter Text

Bubble Rise

Translucent bubbles rising with organic movements.

CSS Animation Particles

Lava Lamp

Floating lava lamp-style blobs with organic deformations.

CSS Animation Blur

Mercury Drops

Metallic drops with realistic reflections and elastic bounces.

CSS 3D Metallic

Wave Surface

Animated water surface with multiple wave layers.

CSS SVG Layers

Click to create a splash

Splash Effect

Interactive splash effect with particles and droplets.

Canvas Interactive Particles

Fluid Motion

Fluid Gradient

Animated gradient that flows like liquid with organic motion.

CSS Gradient Blur

BLOB

Blob Morph

Organic shape that continuously morphs between different fluid silhouettes via border-radius animation.

CSS Organic Keyframes

Click to transform

Icon Morph

Hamburger icon that transforms into a close cross with smooth CSS transitions on click.

CSS JS Interaction

Circle

Shape Shifter

Shape that cycles between circle, square, triangle, hexagon and star using clip-path transitions.

CSS clip-path Cycle

Button Morph

Button that morphs into a loading spinner, then into a validation checkmark on click.

CSS JS UX

Design

Text Morph

Text that morphs between multiple words with blur and opacity for a smooth transition.

CSS JS Typography

Alice Laurent

Designer UI/UX

Specialist in interactive interface design with over 8 years of experience in premium web design.

142

Projects

3.2k

Followers

98%

Satisfaction

Card Morph

Compact card that expands and transforms into a detailed panel on click with smooth transitions.

CSS JS Layout

Star

SVG Path Morph

SVG shape that morphs between star, heart and circle by animating the path attribute.

SVG JS Path

Liquid Morph

Liquid drops that merge and separate using the CSS filter blur + contrast trick for an organic effect.

CSS SVG Filter Organic

Julie Dupont

Front-end Developer

Online

Avatar Morph

Circular avatar that transforms into a rectangular card with user information on hover.

CSS Hover Profile

Off

Toggle Morph

Toggle switch whose knob changes shape while sliding: the circle deforms into a pill before returning to its initial shape.

CSS JS UI

AI & Intelligence

AI Shape Morph

SVG shapes that smoothly interpolate between different silhouettes with organic transitions.

Canvas Morphing Animation

Generative Flow Field

Perlin noise-generated flow field with particles following force lines.

Canvas Perlin Particles

Neural Net Viz

Animated neuron graph with pulsating connections and dynamic activations.

Canvas Network AI

AI Color Shift

Dynamically generated color palette in OKLCH with fluid transitions between harmonies.

CSS OKLCH Colors

Swarm Intelligence

Swarm particles with emergent behavior: cohesion, separation and alignment.

Canvas Boids Emergent

GLITCH

Generative Glitch

Generative glitch art with random slicing and animated chromatic effects.

CSS Glitch Art

Predictive Grid Morph

Interactive grid that deforms on hover with mouse trajectory prediction.

CSS JS Grid

Deep Dream Pattern

Animated fractal patterns inspired by deep dream with self-similar motifs in motion.

Canvas Fractal Generative

AI Typo Morph

Letters that fluidly transform between different words with a typographic morphing effect.

JS Typo Morph

Mesh Distortion AI

Deformable mesh gradient with mouse interactions and reactive organic deformations.

Canvas Mesh Interactive

Fundamentals

Design & Visuals

Animations & Scroll

Gallery & More