Back
gradients.fyi

Next.js, WebGL2, OKLCH, TypeScript

One week to a renderer

Most mesh-gradient tools charged for the useful parts (primarily exporting), so I built one for my own work. Building the renderer took about a week. Its first usable version could build meshes, adapt palettes, stack layers, and export images.

Underneath is raw WebGL2 with radial basis interpolation and colour processing in OKLCH and OKLAB. Colour interpolation is my favourite part. Colours stay bright through the middle instead of collapsing into the dull band a straight RGB blend often produces.

A tool I still reach for

Inside the editor are mesh, linear and orb gradients, with grain, blur, liquify and image export. Its layout borrows a useful idea from Figma: canvas in the middle, controls beside it, every point to be moved directly by hand.

On the homepage, an endless stream of randomly generated gradients explains the tool through its output, while also making it easy to blast through them for inspiration.

Twelve exported gradients in a grid, from soft blobs and hot radials to angular blends and grainy dithers