elefcode

Mesh Gradient Generator

Build soft, multi-point gradient backgrounds from layered radial gradients.

Palettes:
CSS
background-color: #0f172a;
background-image:
    radial-gradient(at 18% 22%, #8b5cf6 0px, transparent 62%),
    radial-gradient(at 78% 18%, #ec4899 0px, transparent 58%),
    radial-gradient(at 26% 80%, #f97316 0px, transparent 66%),
    radial-gradient(at 82% 74%, #06b6d4 0px, transparent 54%);
Base color
Point 1
Point 2
Point 3
Point 4

Advertisement

Guide

About the Mesh Gradient Generator

Mesh gradients are those soft, multi-colored backgrounds where several colors bleed into each other — the look behind a lot of modern app landing pages and hero sections. They feel organic compared to a plain two-stop linear gradient.

The trick is that you don't need an image or a library: stacking several radial-gradient() layers that fade to transparent over a solid base color produces the effect in pure CSS. This generator builds that for you.

How it works

Each color point becomes one radial-gradient(at X% Y%, color 0px, transparent N%) layer. Because each fades to transparent, the layers blend where they overlap, and the base background-color shows through the gaps. More points mean a richer mesh; fewer points keep it clean.

Why CSS instead of an image

A mesh gradient exported as a PNG can weigh hundreds of kilobytes and will band or blur when scaled. The CSS version is a few hundred bytes, renders perfectly at any size and pixel density, and can be recolored by editing a value — no re-export needed.

Using it well

Mesh gradients make great hero and section backgrounds, but they can fight with text. Keep the colors in a similar tonal range, or lay a semi-transparent overlay between the gradient and your content, and always check text contrast. They also pair nicely with a frosted-glass card on top.

How to use it

  1. 1Pick a palette to start, or shuffle for a new arrangement.
  2. 2Drag each point's X, Y, and size to shape the blend.
  3. 3Adjust individual colors and the base color behind them.
  4. 4Copy the CSS into your background styles.

Frequently asked questions

What is a mesh gradient?

A background where several colors blend softly from different points, rather than along a single line. It looks organic and is common on modern landing pages.

How is this done in pure CSS?

By layering multiple radial-gradient() backgrounds that fade to transparent over a solid base color. Where they overlap, the colors blend into a mesh.

Is CSS better than exporting an image?

Usually yes. The CSS is a fraction of the size, stays sharp at any resolution, and can be recolored by editing a value instead of re-exporting.

My text is hard to read on the gradient — what should I do?

Keep the palette within a similar tonal range, or add a semi-transparent overlay between the gradient and the text, then verify with a contrast checker.

Is anything uploaded?

No. The gradient and CSS are generated entirely in your browser.

Related tools

CSS GradientGlassmorphismSVG WaveContrast Checker