What makes this different from a CSS mesh gradient?

A CSS mesh is several radial gradients stacked on one element, and the browser blends them in sRGB with a fixed falloff. Here every pixel asks all the points how much they matter and averages their colors in OKLCH, so the places where colors meet stay as vivid as the points themselves. It also means points can move, overlap and carry their own falloff shape, none of which stacked radials can do.

Why does the color space matter so much?

Because a weighted average of several hues in RGB passes near grey. The mesh converts each color so hue and chroma become a vector, averages those, then rescales the result to the separately averaged chroma. That last step is the one that matters: without it the middle of the mesh desaturates, which is the same defect as the dull band in a two-stop CSS gradient.

What does seamless actually do?

It rounds every point's motion frequency to a whole number of cycles per loop. Motion is built entirely from sines of the loop phase, so once the frequencies are whole numbers the last frame is the first frame by construction. Nothing is cross-faded and there is no join to hide.

What is the seed for?

It drives point placement, color assignment and motion phase. Randomize picks a new one; typing an old one back rebuilds that composition exactly. It is also why the share link works: most of a mesh is reproducible from a number.

Does the share link expire?

No, because there is nothing behind it to expire. The whole project is encoded into the URL itself: topology, colors, positions, motion, effects, seed and canvas. No account, no database, no dead link in two years. The trade is that a large mesh makes a long link.

Can I use the output in my own code?

That is the point of the Code tab. It gives you the generated fragment shader as it is running, the project as JSON, a Canvas 2D fallback, plus CSS and SVG approximations for cases where a still is enough. The CSS and SVG say plainly what they cannot carry rather than quietly dropping it.

Is anything uploaded?

No. The mesh is rendered on your GPU, images and video are encoded in the browser, and saved meshes live in this browser's local storage. Nothing reaches a server.

How the Mesh Gradient Editor works

A real mesh gradient editor. Points you move directly, colors blended in OKLCH so nothing goes flat where they meet, procedural motion that loops exactly, and an effect stack that compiles into one shader.

Open the editor

Move the points

Drag a point to move it, double-click empty canvas to add one. The guides only exist while you are working.

Give it motion

Pick a movement for every point at once, then set speed and amplitude. Seamless keeps the loop exact.

Stack the effects

Distortion runs before the mesh is sampled, everything else after. Reordering changes the picture.

Questions

What makes this different from a CSS mesh gradient?: A CSS mesh is several radial gradients stacked on one element, and the browser blends them in sRGB with a fixed falloff. Here every pixel asks all the points how much they matter and averages their colors in OKLCH, so the places where colors meet stay as vivid as the points themselves. It also means points can move, overlap and carry their own falloff shape, none of which stacked radials can do.
Why does the color space matter so much?: Because a weighted average of several hues in RGB passes near grey. The mesh converts each color so hue and chroma become a vector, averages those, then rescales the result to the separately averaged chroma. That last step is the one that matters: without it the middle of the mesh desaturates, which is the same defect as the dull band in a two-stop CSS gradient.
What does seamless actually do?: It rounds every point's motion frequency to a whole number of cycles per loop. Motion is built entirely from sines of the loop phase, so once the frequencies are whole numbers the last frame is the first frame by construction. Nothing is cross-faded and there is no join to hide.
What is the seed for?: It drives point placement, color assignment and motion phase. Randomize picks a new one; typing an old one back rebuilds that composition exactly. It is also why the share link works: most of a mesh is reproducible from a number.
Does the share link expire?: No, because there is nothing behind it to expire. The whole project is encoded into the URL itself: topology, colors, positions, motion, effects, seed and canvas. No account, no database, no dead link in two years. The trade is that a large mesh makes a long link.
Can I use the output in my own code?: That is the point of the Code tab. It gives you the generated fragment shader as it is running, the project as JSON, a Canvas 2D fallback, plus CSS and SVG approximations for cases where a still is enough. The CSS and SVG say plainly what they cannot carry rather than quietly dropping it.
Is anything uploaded?: No. The mesh is rendered on your GPU, images and video are encoded in the browser, and saved meshes live in this browser's local storage. Nothing reaches a server.

All labs

Pairs with

The catalog behind this tool: real, published entries with verified pricing and licensing, not a list of affiliate links.

Gradient GeneratorFor when a ramp will do.Color PickerBuild the palette first.Design toolsWhere the export lands.