Who charges for a gradient?

Every mesh-gradient generator I found wanted money. For a gradient. A few blurry blobs behind a subscription, which felt a bit much for something you can build in an afternoon.

The other half of it is that I love OKLCH. Blend red into green the normal way and you get a muddy grey-brown sludge through the middle. In OKLCH the midpoint stays bright and clean, because the maths tracks how eyes actually read colour. So I wanted one generator that used it properly, cost nothing, and stayed out of my way.

Three devices showing the gradients.fyi editor, a bright mesh gradient on the canvas with the controls panel open on the right

Familiar, but dark

You drop in shapes (circles, boxes, cones, linear bands, proper mesh) and push them around. Swap the blend, add grain, blur the whole thing, drag dents into it like liquify in Photoshop. There’s a stack of filters too, including the ASCII dither blend that half the internet is using right now.

I wanted it to feel familiar the second you opened it, so the editor borrows the shape of Figma: a canvas with a panel beside it, everything dragged into place by hand. The look went the other way, dark and quiet like Vercel and Resend, whose design I keep coming back to. Underneath, it’s WebGL2 doing the colour interpolation in OKLAB, and the whole composition packs into the URL, so you can paste a gradient to someone and they see exactly what you made.

Case Study Taking the short way round the hue wheel

Hue is an angle

OKLCH puts red near 29 degrees and blue near 264. Blend between them and something has to pick a direction round the wheel, and the naive pick goes the long way about half the time, hauling a simple blue-to-red through the whole rainbow to get there.

Never let it choose

Each point's hue is split into its sine and cosine, both blend like ordinary numbers, and the angle comes back out with atan2, short path and all. No checking which way is closer, no seam where the wheel snaps from 360 back to 0.

Versus a straight RGB line

Traditional gradients have no hue to wrap. They run a straight line through RGB instead, which is why they sag into grey through the middle, the spot blue-to-yellow goes to die. Flip the editor to sRGB to watch it happen.

A row of finished gradients beside a laptop, from a soft blue blob to a hot pink radial to a green angular dither

The one I kept

This is one of my favourite things I’ve built, and one of the few I keep coming back to. I add shapes and filters I don’t strictly need, and reach for it whenever a page wants a background. Launching it wasn’t a finish line so much as the point it got good enough to leave running.

Built with Next.js, WebGL2 and Zustand, deployed on Cloudflare Pages.

gradients.fyi

Who charges for a gradient?

Familiar, but dark

The one I kept