Gradient Mesh Generator

What a CSS mesh gradient really is

A mesh gradient is the smooth, painterly, multi-colour background you see on modern app landing pages and hero sections — the kind that looks like watercolour bleeding across the screen rather than a single straight colour fade. There is no dedicated mesh-gradient() property in CSS. Instead, the effect is faked by stacking several radial-gradient() layers, each anchored at a different point and each fading to transparent, so the colours overlap and blend in the middle. This generator builds exactly that: you place up to nine colour points on a 3×3 grid, drag them around, and the tool writes the layered CSS for you to copy. Everything runs in your browser; nothing is uploaded.

How the layered gradient is constructed

Each active control point becomes one radial-gradient layer. The tool emits a layer in this exact form:

radial-gradient(ellipse at 20% 20%, #00c6ffcc 0%, transparent 60%)

Three details make this work. The position 20% 20% places the gradient's centre at that point on the element. The cc appended to the hex colour is an alpha channel — in 8-digit hex, cc is roughly 80% opacity, so each blob is slightly translucent and lets the layers underneath show through. And transparent 60% means the colour fades completely to nothing by 60% of the radius, leaving the surrounding area open for other layers to fill. Stack several of these with background: and the topmost layer wins where blobs overlap, but the 80% opacity lets lower layers tint through, producing the soft blend.

A worked example

Suppose you keep just three points: cyan at the top-left, purple at the top-centre, and red at the top-right. The tool outputs:

background: radial-gradient(ellipse at 20% 20%, #00c6ffcc 0%, transparent 60%), radial-gradient(ellipse at 50% 10%, #7b2ff7cc 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, #f64f59cc 0%, transparent 60%);

Paste that into any element's background and you get a cyan-to-purple-to-red wash across the top, fading to the element's base colour below. Add the lower-row points back and the colour wraps around all four corners. Because the layers list in source order, dragging a point or recolouring it simply rewrites its one line — the live preview updates instantly.

Using the presets and randomizer

The four presets — Aurora, Sunset, Ocean, and Forest — are curated nine-point colour sets chosen so adjacent blobs harmonise rather than clash. They are a fast starting point; tweak one or two points afterward rather than building from scratch. The Randomize button assigns every point a fresh random hex colour and turns all nine on. Randomizing is great for discovering unexpected pairings, but it ignores colour theory, so expect to disable a jarring point or nudge a hue afterward. You can toggle any individual point off to thin out a busy mesh — fewer, well-placed blobs often read as more sophisticated than all nine firing at once.

Practical tips for production-ready meshes

• Limit your palette. Three to five points in analogous or neighbouring hues produce a calm, premium look. Nine clashing colours look like a test pattern. Disable points rather than forcing all nine.
• Keep blobs near the edges for hero sections. Centre-heavy meshes compete with foreground text. Pushing colour toward the corners leaves a calmer middle band where headlines stay readable.
• Set a fallback base colour. Because every layer fades to transparent, the element's own background shows through the gaps. Add a solid background-color underneath the gradient stack so untouched areas have a deliberate tone.
• Mind contrast for overlaid text. A mesh varies in brightness across its surface, so text that is legible over one blob may wash out over another. Test your actual copy against the busiest part of the gradient.
• Adjust the spread for sharper or softer blends. The generated 60% stop gives a soft falloff. If you want crisper colour zones, lower that value in the copied CSS; raise it for an even hazier wash.

Browser support and how to apply the output

The output uses only standard radial-gradient() syntax with 8-digit hex colours, both of which are supported in all current versions of Chrome, Firefox, Safari, and Edge — there are no vendor prefixes or experimental features involved. To use it, copy the value and drop it into a stylesheet rule, for example .hero { background: /* pasted value */; }. Since it is plain CSS, it also pastes directly into the style attribute of an inline element, into a CSS-in-JS object, or into the background field of a design tool that accepts raw CSS.

Common mistakes

The most frequent issue is expecting the blobs to blend like real paint where they overlap. CSS layers do not average their colours; the upper layer's translucent pixels composite over the lower ones, which is close to but not identical to additive mixing — so the overlap region trends toward the topmost colour. If a transition looks muddy, reorder or reposition the points rather than adding more. The second common mistake is cropping the gradient with a container that has overflow: hidden and rounded corners but no matching base colour, which exposes hard transparent edges. Always pair the mesh with a solid backstop colour.