Gradients

Gradients can be defined in CSS or SVG, or drawn using canvas or WebGL.

Animated gradients in SVG

It’s possible to animate gradients in SVG, but it doesn’t look good—it’s steppy and the framerate is low. It also chews through a lot of CPU since it has to repaint on every frame without hardware acceleration.

You can use an <animate> tag inside of a linear gradient stop to animate color:

<linearGradient>
  <stop>
    <animate 
      attributeName="stop-color" 
      values="red;yellow;blue" 
      dur="10s" 
      repeatCount="indefinite" 
    />
  </stop>
</linearGradient>

Or you can use an <animateTransform> inside a <linearGradient> to animate its transform.

<linearGradient>
  <animateTransform
    attributeName="gradientTransform" 
    type="rotate"
    from="0"
    to="360"
    dur="10s" 
    repeatCount="indefinite" 
  />
</linearGradient>

Animated gradients via slideshow

It’s possible to create an animated gradient by stretching out a long gradient and translating it through a viewing region like a marquee. This is awkward to set up, but ends up looking smoother and can take more advantage of hardware acceleration since we’re only translating.

Gradients in WebGL (still learning)

Animated gradients can be done in WebGL using fragment shaders. The simplest technique would be something like checking gl_FragCoord for each pixel and running some function to calculate the color value at each point, though MDN recommends against this.

<script id="fragment-shader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = [do something cool with gl_FragCoord];
  }
</script>

Using shaders to apply color in WebGL has a technique using varying which should lead to better performance.

MDN has the boilerplate to set up WebGL and compile and run a shader.

To animate it, you wiggle the parameters in a requestAnimationFrame loop (or requestPostAnimationFrame), making repeated calls to draw.