Mesh Gradient Generator

A mesh gradient blends several colors that each sit at their own spot on the canvas, instead of along one line like a CSS gradient. The soft, organic look is popular for wallpapers, hero sections and app splash screens. This generator places your color points (or random ones from a seed), blends every pixel from all of them in the OKLab color space so mixes stay clean rather than muddy, adds optional grain against banding and saves a PNG, JPG or WebP — all in your browser.

How to use this tool

1. Type color points as "color x% y%", one per line — or choose random colors and a seed.
2. Pick a size preset or a custom size.
3. Choose how softly the colors blend and whether to blend in OKLab or sRGB.
4. Set a little grain (2–6%) for large screens, pick a format and download.

Formula

color(pixel) = Σ wᵢ × colorᵢ ÷ Σ wᵢ, with wᵢ = 1 ÷ (dᵢ² + 0.04²)^(p ÷ 2)

dᵢ is the distance from the pixel to point i (relative to the image diagonal) and p is 1.6 (very soft), 2.4 (medium) or 3.6 (defined); the small 0.04 term rounds off the peak at each point so it does not show as a hard spot. Colors are averaged as OKLab coordinates, which keeps blue-to-yellow blends from passing through gray; see-through points are weighted by their opacity, as CSS blends them, so they fade out without darkening. The blend is computed on a grid of up to 250,000 samples and scaled up with bilinear interpolation.

Example

With the four default points — coral #FF6B6B at 10% 15%, yellow #FFD93D at 85% 10%, green #6BCB77 at 80% 85% and blue #4D96FF at 15% 80% — a 1920 × 1080 image is coral at (192, 162) and green at (1536, 918), with soft OKLab blends between them. Two points, black at 0% 50% and white at 100% 50%, blended in sRGB give a mid gray of about #808080 half-way, because both points are equally far away there.