Gradient Mesh Editor

Create complex multi-point gradient meshes by placing and coloring control points on a grid.

Tested tool guide Tested browser tools Checked August 16, 2026

What Gradient Mesh Editor does and how it behaves

A gradient mesh spreads color in two dimensions rather than along one line or outward from one center. Gradient Mesh Editor lets you place multiple colored control points on a grid and evaluate the blended surface between neighboring points. It suits compositions with several localized glows, corner colors, or irregular transition regions. The common surprise is that a point is not an isolated dab of paint: its color and location participate in adjoining mesh cells, so a small edit can reshape more than the immediately visible patch.

How the result is produced

Grid and color anchors

The grid is the map of color relationships. Position a control where the composition needs a color anchor, then assign its color. Controls around the same mesh cell influence the color field inside that cell, so topology matters as much as the palette. Closely placed controls concentrate a transition into a smaller region; widely separated controls let it occupy more of the surface.

Connected neighborhood edits

Treat each edit as a neighborhood change. When you move or recolor one control, inspect every cell that meets it, because all of those cells now blend from the revised anchor. To make a localized glow, use nearby controls to hold the surrounding hues; to make a broad wash, leave more distance between competing anchors. The final field is one connected mesh, not a row of independent gradient strips.

Good uses

Creating a website hero background with cool upper corners, a warm off-center glow, and a darker lower edge when no single straight or radial gradient matches the composition.
Developing an abstract poster base where three or more brand colors need distinct territories while their borders remain soft, curved-looking, and visually connected across the full design.
Studying reflected-light color around a product mockup by placing localized blue, pink, and amber influences around a comparatively neutral central area without stacking separate gradient bands.

Limits and checks

Do not read the controls as a sequence of ordinary gradient stops. Their horizontal and vertical positions and their grid neighborhoods matter, so rearranging the same colors can produce a substantially different surface.
A mesh result does not establish that another application or target format can represent it directly. A general two-dimensional mesh is not interchangeable with one CSS linear-gradient() or radial-gradient() declaration.
Intermediate colors appear between control colors. A hue visible in the surface may be a blend that was never assigned to any point, so identifying it solely by the nearest anchor can be misleading.

Common questions

Can I reproduce the mesh with one CSS linear gradient?

No, not in the general case. A single CSS linear-gradient() changes color along one gradient line, while this mesh can place color influences at different horizontal and vertical positions. A particularly simple result might be approximated by one linear gradient. More complex meshes can sometimes be imitated by layering gradients, but that is not an exact one-to-one representation.

Why did editing one control change several regions?

That control belongs to every mesh cell that touches it. Its color and position therefore contribute to multiple neighboring blends, so an edit can cross what looked like a local boundary. Inspect all adjoining cells after each change. If the influence reaches too far, adjust nearby anchors so they preserve the surrounding hues and confine the transition more tightly.

References and verification

The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.