Building a gradient generator

Emilien Jegou, Fri May 09 2025

Try it at gradients.emje.dev (computer only)

I was inspired by Affinity Designer's procedural texture generation to build my own procedural texture generator as a fun project. I think it turned out all right, so I am now making it public.

What you can do with it:

Pan around with your mouse.
Modify the generation parameters (e.g., scale, noise ratio, distortion).
Modify the gradient (add and remove nodes with right/left click).
Set a custom gradient curve.
Regenerate the gradient (random seed).
Download the results (currently by right-clicking and selecting 'Save Image As...').

Here is an example of its use for a hero gradient:

Development

I developed it in full-on JavaScript; there's no framework involved. Since we need to calculate the value of each pixel on the screen based on a custom formula (a mix of S-Curve noise), we use a Rust Web Worker to compute the value of the gradient while JavaScript is still in charge of attributing the colors. This layout doubles the speed of generation of large gradients (from 900ms to around 400ms) but, more importantly, tremendously lowers the required memory use.

To allow the user to pan around, I also set up grid partitioning and caching. You can see it in this video with debug enabled. This was also somewhat of a requirement since I needed to divide the work across the user's CPUs (although I could have used worker threads, but it's quite annoying to set up). Each square of the grid passes through a worker pool and is picked up by one of four workers. When the result is received back by the caller, it is saved to a basic memory cache of around 300 squares (screen-dependent).

Building a gradient generator

Development

Base presets

Deep blue

Cyber lamp

Evangelion

Blaze

Arhipelago

Alien

H20