// HACKER NEWS — CYBERSECURITY
Methods for Random Gradients
Over the years — including during my time at OpenAI — I’ve experimented with different methods for generating random gradient images. These include:
Randomly generated gradients were an essential element of OpenAI’s early visual identity, designed by Ben Barry in 2017. His earliest generator randomly picked four corner colors and interpolated between them.
After I joined Ben at OpenAI in 2018, I began exploring more ways to create gradients programmatically. An engineer friend suggested using heightmaps: grids of cells, each containing a height value ranging between 0 and 1.
I developed an implementation in Processing that used randomized noise generation (a modified and smoothed Perlin noise) to populate height values.
Heightmaps are often visualized as grayscale images, mapping values to a simple black-to-white color scale where lower values are dark and higher values are light.
But we can also apply any color scale to these values. I generated randomized scales by creating color stops with varied locations, hues, saturations, and brightness, and then interpolating a smooth blend between them.
Putting it all together, I mapped these randomized color scales to the randomized heightmaps, resulting in organic, striking gradients.
These gradients didn’t feel quite right for OpenAI’s visual identity so never made it to production, but they’re nevertheless lovely to look at.
In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.
While performant and clever, the gradient was static. About a year later, I developed a gradient implementation in Scalable Vector Graphics (SVG) that could be dynamically randomized while maintaining performance.