Micro Tools
Advertisement

Mesh gradient maker

Combine four color blobs with adjustable softness into a smooth mesh gradient, the trendy background style from modern landing pages. Copy the CSS or download it as a file.

Gradient blobs

Four radial color blobs blend into one smooth background. Adjust softness to taste.

Preview and CSS
Advertisement

What makes a mesh gradient different

A mesh gradient layers several large radial gradients on top of each other, each fading to transparent. Where the color blobs overlap, the hues blend optically, creating organic flowing color fields. This is the signature look of many modern SaaS landing pages and app splash screens.

How softness changes the result

Softness controls how far each blob spreads before fading out. Low softness keeps distinct color pools with visible edges, high softness melts everything into one continuous wash. Most hero backgrounds look best between 60 and 85 percent softness.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Mesh Gradient Maker FAQs

Which colors work best for mesh gradients?
Pick colors that are neighbors on the color wheel, like violet, blue and teal, for harmony, or one warm plus one cool accent for energy. Avoid more than one very dark color or the blend turns muddy in the middle.
Can I use this gradient as a website hero background?
Yes, paste the CSS onto your hero section. Add background-size: cover and a min-height. For text legibility, overlay a semi-transparent dark layer or pick a dark base color so white text stays readable.
Why does the CSS use transparent in each layer?
Each radial gradient fades to transparent so the layers underneath show through. Without transparency the topmost blob would cover everything with a hard circle. The base color fills the gaps between blobs.
How do I make the gradient animate slowly?
Animate background-position or layer opacity with CSS keyframes. A common trick is two stacked copies of the gradient cross-fading over 12 seconds with animation: mesh 12s ease-in-out infinite alternate.
Will this slow down my page?
No. Radial gradients are rendered by the browser's graphics engine and are very cheap. They cost far less than a background image download and scale crisply to any screen size.
Advertisement