Mesh Gradient Generator
Mesh gradient generator: blend up to eight colors into a soft color gradient, mixed in OKLab so it stays clean. Free in your browser; save a PNG, MP4 or GIF.
What is a mesh gradient?
A normal color gradient blends one color into another along a single line, straight for linear and outward for radial. A mesh gradient blends several colors across a surface from many points at once. It takes its name from the gradient mesh in vector editors, which is a grid of patches with a color pinned to each corner.
You get the same soft look here without any grid. Up to eight control points sit at seeded positions, and every pixel takes a weighted average of their colors, with closer points counting for more. That's inverse distance weighting, the standard way to interpolate scattered data.
The averaging happens in OKLab, the perceptual color space Björn Ottosson published in 2020, which is now part of CSS Color Level 4. Average blue and orange as plain RGB numbers and they meet in a muddy gray, while in OKLab a lot more of their color makes it through the middle.
How to make a mesh gradient background
You start on the Aurora palette. Swap it under Colours for Peach, Lagoon, Dusk, Mint or Mono, or set up to eight of your own. Colors are handed to the points in order, and if there are more Points than colors the list just starts again, so four colors on eight points uses each one twice.
Softness is the power the distance gets raised to, anywhere from 0.5 to 6. Keep it low and every point reaches across the whole frame, giving broad, even blends. Turn it up and the nearest point wins, so the frame breaks into pools of color with soft seams in between.
Motion is how far each point wanders (up to about an eighth of the frame in either direction) and Speed is how fast it gets there; the Still preset just sets Speed to 0. Seed shuffles the points into a new layout, and it's the same layout every time for a given seed. If you tick From image, the points pick up their colors from the picture underneath them, which is exactly what Gradient from Image opens on.
Settings for a hero banner, a phone wallpaper and a two-color blend
Hero banner under a white headline: set Colours to #0b1d51, #2d1b69, #6a3fb0 and #c84b8a, then use Points 4, Softness 1.8, Motion 0.3 and Speed 0.15. White type measures at least 4.3:1 against every one of those four colors, comfortably past the 3:1 WCAG wants for large text. The drift is slow enough that it won't pull anyone's eye off the words.
Phone wallpaper: pick 9:16 under Settings, then the Still preset with Points 7 and Softness 3.5. You'll get distinct pools of color on the screen rather than one flat wash. Roll Seed until there's no pool sitting right where the clock goes, then save the PNG at 1152 by 2048, the biggest this page offers at that shape.
Two-color blend for a slide: give Colours only two entries, say #ff6a88 and #ffd6a5, and set Points to 2 and Softness to 1. Two points split the frame along the line halfway between them. With Softness that low, the change from one color to the other stretches across most of the width.
Why does my mesh gradient look gray in the middle?
Most of the time it's a low Softness combined with colors that sit far apart on the color wheel. Close to 1, every point has some pull everywhere, so the center of the frame turns into the average of all of them. Opposite hues like blue and orange then cancel out toward neutral, and OKLab can't fully stop that.
Push Softness to 3 or higher so each point keeps its own patch, cut down the number of Points, or build your palette from neighboring hues instead. There's a palette generator on the Color Tools hub that turns one color into an analogous set.
Why does my saved gradient show bands?
An 8-bit file only has 256 levels per channel. In a slow, dark blend one level can cover a wide strip before the next one starts, and your eye picks up each of those edges. The effects here run in half-float buffers, and on the way down to 8 bits they add a fixed, fine noise of up to one level, which breaks the edges up.
Whether the noise survives comes down to the file format. We saved the hero banner from above at 1920 by 1080 and measured one row across its middle. In the PNG, no run of identical pixels was longer than 8 px. The JPG's longest ran 84 px and the WebP's 152 px, because both lossy formats smooth the noise away. File sizes were 2.4 MB for the PNG, 43 KB for the JPG and 15 KB for the WebP.
So save a PNG if the gradient is going to print or into more editing. For a web page, go with JPG: its bands stayed narrower than the WebP's, at roughly a fiftieth of the PNG's weight. GIF only holds 256 colors a frame and tops out at 960 px on the longer side, so leave the export's Dither box ticked and it'll swap the steps for a fine crosshatch.
Can I get CSS code for a mesh gradient?
This page doesn't write CSS. A lot of gradient generators give you CSS for a linear blend, but this one saves pictures and video. CSS can draw linear, radial and conic gradients, and none of them blends from points scattered across a surface, so faking a mesh in CSS means stacking several radial gradients that each fade out to transparent.
If all you need on a website is a plain blend of two or three colors, a CSS linear-gradient() is lighter than any image you could save. Write it as linear-gradient(in oklab, …) and the colors mix in OKLab, the way this generator mixes them. For the mesh itself, the Shader Effects & Backgrounds hub covers saving a generator as code that draws it live.
Within the 30 seconds this page records, the drifting points never return to where they started, since each one moves in its two directions at different rates. In the export settings, set Seamless loop to 1 or 2 seconds and the end fades into the start.