Built-in toolFree · No signup

Animated Mesh Gradient Background Generator

Mesh gradients — soft, blurry, overlapping color blobs — are one of the most popular design trends right now. This generator builds them entirely with stacked CSS radial-gradient() backgrounds, no images or canvas required, with an optional slow drifting animation. Add or remove color blobs, drag the softness slider, shuffle positions, and copy a single ready-to-use background rule.

Share on X LinkedIn

Presets

Color blobs (4)

at 20%, 30%

at 75%, 20%

at 50%, 75%

at 85%, 80%

Base background color

Softness — 60%

How far each color fades out before becoming transparent.

AnimationAnimate (slow drifting motion)Duration — 14s

Live preview

CSS Output

.mesh-bg {  background-color: #0f172a;  background-image:    radial-gradient(circle at 20% 30%, #1d9e75 0%, transparent 60%),    radial-gradient(circle at 75% 20%, #0ea5e9 0%, transparent 60%),    radial-gradient(circle at 50% 75%, #8b5cf6 0%, transparent 60%),    radial-gradient(circle at 85% 80%, #ec4899 0%, transparent 60%);  background-size: 200% 200%;  animation: cssa-mesh-float 14s ease-in-out infinite alternate;} @keyframes cssa-mesh-float {  0%   { background-position: 0% 0%; }  100% { background-position: 30% 20%; }}

Was this tool helpful?

How to use

Pick a preset or start fresh

Brand, sunset, cool, or pastel color sets — or build your own blob colors.

Adjust blobs & softness

Add or remove color blobs, shuffle their positions, and control how soft the fade is.

Turn on animation

Add a slow drifting motion and tune the duration.

Copy the CSS

One background rule (plus a keyframes block if animated) — apply it to any container.