1 min read
gradients.fyi

Next.js, WebGL2, OKLCH, TypeScript

One week to a renderer

Most mesh-gradient tools charged for the one part you actually need: exporting. So I built my own in raw WebGL2. The first usable renderer took about a week, and around 50 people use it each day.

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

Keeping the colour alive

Colour interpolation is my favourite part. Pick a pair and a blend, and watch the path it takes round the wheel:

Hue is a circle, so 359 and 1 degree are neighbours. Blend the raw angles and the colour takes the long way round the wheel. The shader turns each hue into sine and cosine first, blends those, and turns them back with atan2. No seam.

The editor

It borrows a useful idea from Figma: canvas in the middle, controls beside it, and every point moved by hand. Here’s a small version, blended the same way as the real shader. Drag the points:

And the real one:

Mesh, linear and orb gradients, with grain, blur, liquify and dither on top. These gradients show up throughout my work and in Avatone’s branding and pitch decks. I still use it myself.