A flowing WebGL gradient, deconstructed

A flowing WebGL gradient, deconstructed April 12, 2025 A few weeks ago I embarked on a journey to create a flowing gradient effect — here’s what I ended up making: Loading canvas... This effect is written in a WebGL shader using noise functions and some clever math. In this post, I’ll break it down step by step. You need no prior knowledge of WebGL or shaders — we’ll start by building a mental model for writing shaders and then recreate the effect from scratch. We’ll cover a lot in this post: writing shaders, interpolation, color mapping, gradient noise, and more. I’ll help you develop an intuition for these concepts using dozens of visual (and interactive!) explanations. If you just want to see the final code, I’ll include a link to the shader code at the end of the post (this blog is open source so you can just take a look). Let’s get started! Color as a function of position Building the gradient effect will boil down to writing a function that takes in a pixel position and ... Read full article.