Canvas Mesh Gradient Background — Free Animated Blurred Blob Effect

The animated mesh gradient look — soft, saturated color fields blending into each other — is everywhere in modern SaaS and product marketing pages. This snippet builds it with a small trick: draw sharp, high-contrast radial gradient circles on a low-resolution canvas, then let a single CSS filter: blur() on the canvas element do the actual softening. The blur is free, GPU-accelerated, and completely decoupled from the animation logic.

Draw sharp, let CSS blur it

Every blob is a plain createRadialGradient circle — full color at the center fading to transparent at the edge — drawn with hard mathematical precision. None of that softness is visible directly: .cmg-canvas { filter: blur(60px) saturate(1.3) } in the CSS is what turns those crisp circles into the smooth, melting color fields the effect is known for. Because the blur is a compositor-level CSS filter rather than a canvas shadow or manual convolution, it costs almost nothing extra to animate — the JavaScript never has to know it's happening.

Drawing small on purpose

resize() deliberately sizes the canvas's backing store to only 60% of the wrapper's dimensions. Since a 60px blur is going to erase most fine detail anyway, there is no benefit to drawing at full resolution — doing so would just spend more pixel-fill time per frame for a visually identical result once blurred. This is the inverse of the usual high-DPI advice, and it's a useful pattern any time a canvas feeds into a heavy CSS filter.

Orbits instead of random walks

Each blob in BLOBS has a hx, hy home position and orbits it on an ellipse defined by orbitX, orbitY, its own speed, and a phase offset — cx = (hx + cos(t * speed + phase) * orbitX) * W. Because every blob's period, radius, and starting phase are different, the five orbits drift in and out of alignment with each other indefinitely without ever repeating in a way a viewer would notice, and — unlike a random-walk approach — the motion is perfectly smooth and perfectly loops mathematically rather than needing manual bounds-checking.

Layering and readability

The wrapper's actual content sits in a separate stacking layer above the canvas with its own text-shadow for legibility against a busy background, and the canvas itself paints an opaque base color before drawing blobs so partially-transparent gradient edges never reveal a transparent hole. Pair this background with a gradient mesh hero layout, or swap the palette for a calmer duotone version behind a glowing stars card.