MakeGradient – Free WebGL gradient engine,exports to Code/Figma/video++

I built a gradient generator that runs custom GLSL shaders in the browser. It's free at makegradient.com.

Most gradient tools generate CSS linear/radial gradients.MakeGradient renders everything in WebGL with a custom fragment shader per modes like mesh blending with domain warping, aurora curtains with sine-wave color bands, deep-sea caustics via Voronoi noise, holographic iridescence, curl-noise fluid simulation, and more. 8 modes total.

Color generation happens in Oklch space (via culori) with a binary-search gamut mapper that clamps back to sRGB. This keeps blended colors perceptually uniform instead of the muddy midtones you get mixing in hex/HSL.

The rendering library is ogl (~8kb). The whole thing is React + Vite + Tailwind, statically hosted.

Exports: React component, Tailwind config, CSS fallback, standalone embed.js script, Figma-ready vector SVG (for modes that map to radial gradients) or raster SVG, 10-second video capture via MediaRecorder, and Download PNG.

The UI is inspired by Teenage Engineering's industrial design (shout out to them)

No account, no paywall, no tracking beyond basic analytics:GA & Clarity (clarity will be removed after a few days; it was just added for my curoistiy to see how people use the tool...No PI is ever recorded or transmitted).

There are some unconventional (trippy) Color blending and animations in couple of modes, would love some feedback on that too.

The tool would be Forever free! It does not even have a backend (and no plans to add that either)

Source rendering is client-side only.

Would love feedback on the shader quality and export fidelity. The Figma vector export specifically tries to decompose the shader output into stacked radial gradients that remain editable in Figma — curious if any of you find this useful.

Check out at https://www.makegradient.com/