Author: Pavel Kolesnikov (linkedin, website)
Try the implementation on web or figma
Mesh gradients are a powerful way to create smooth, organic color transitions. Traditional techniques like spline-based interpolation or multiple overlapping radial gradients can be effective—but they also come with trade-offs: visual artifacts, complexity, or the need for structured meshes.
In this article, I’ll show you how to use Radial Basis Function (RBF) interpolation to generate seamless gradients from just a set of colored points. This approach is portable, flexible, and simple to implement.
Imagine placing a glowing colored dot on a canvas. The closer you are to the center of that dot, the more intense the color. When you place multiple such dots, the colors blend together based on proximity.
This is the essence of Radial Basis Functions. Each point emits a smooth influence that fades with distance. By summing the influence of all points, we get a continuous gradient across the entire surface.
Let’s say we have $N$ points $(x_1, y_1), (x_2, y_2), \ldots, (x_N, y_N)$ each with a corresponding color $c_1, c_2, \ldots, c_N$. We want to find a function:
$$ f(x, y) \rightarrow \text{color} $$
that satisfies the constraint:
$$ f(x_i, y_i) = c_i \quad \text{for all } i $$
and produces smooth color transitions in between.
We define an RBF as a function that depends only on the distance between two points. One form that works well in practice is:
$$ \text{RBF}(x_0, y_0, x_1, y_1) = \frac{0.5}{(x_0 - x_1)^2 + (y_0 - y_1)^2 + 0.5} $$
You can also express this in terms of a radial distance $r$: $\text{RBF}(r) = \frac{0.5}{r^2 + 0.5}$