FREE TOOL · OKLCH · CSS EXPORT
Mesh Gradient Generator
Build soft, multi-color mesh gradients from draggable points. Colors are harmonized in OKLCH, exports are free hi-res PNGs with no watermark, and the CSS output renders the same look with layered radial gradients — no WebGL required.
Free · OKLCH · CSS export
A mesh gradient generator that exports real CSS — not just an image.
Mesh gradients are the soft, multi-color washes you see behind modern hero sections and app backgrounds. This generator builds them from a handful of draggable color points, harmonizes the colors in OKLCH so they stay balanced, and gives you two ways out: a free hi-res PNG, or copy-paste CSS that renders the same look with layered radial gradients and no WebGL.
How to use it
Hit randomize (or press space)
Every press recolors the mesh with a fresh OKLCH-harmonized set, so the colors stay balanced in perceived lightness instead of clashing the way random sRGB picks do.
Drag the points
Each handle is a color blob. Drag it around the canvas to move where that color pools. Three to six points is the sweet spot — more than that turns to mud.
Tune base and spread
The base color shows through the gaps. A larger spread makes the blobs overlap into smooth washes; a smaller spread keeps them as distinct glows.
Export as PNG or copy the CSS
Download a 1×–4× PNG for free with no watermark, or copy plain CSS that renders the same mesh with layered radial gradients — no WebGL, no JavaScript, no canvas required.
Frequently asked questions
Is this mesh gradient generator free?
Yes. Unlimited generation, unlimited PNG exports up to 4× resolution, and CSS export are all free with no watermark and no account. Many mesh gradient tools paywall hi-res or video export — this one does not.
Does the exported CSS need WebGL or JavaScript?
No. The CSS output is a stack of standard radial-gradient layers over a base color. It works in every modern browser with no canvas, no shader, and no runtime — paste it straight into any stylesheet or Tailwind class. That portability is the trade-off versus WebGL mesh tools: the gradient is static rather than animated, but it ships as a few lines of pure CSS.
Why generate colors in OKLCH?
OKLCH is perceptually uniform, so colors picked at the same lightness actually look equally bright. Randomizing hues at a fixed OKLCH lightness produces a palette that feels cohesive, where the equivalent random HSL or RGB picks would jump unevenly between glaring and muddy.
How do I avoid dark halos around each color?
Each blob fades from the solid color to the same color at zero alpha, not to transparent black. That keeps the base color showing through cleanly with no gray ring — a common artifact when blobs fade to the CSS transparent keyword.
Can I reproduce a mesh later or share it?
Yes. The full state — base color, spread, and every point — is encoded in the URL hash, so Share copies a link that reopens the exact same gradient.