Apply HSL rainbow colors to multiple HTML elements using CSS, JavaScript, and GreenSock.

This quick tip shows you the theory behind stepping through a rainbow of hues using hsl() css background color. We'll use some vanilla JavaScript and GreenSock to compare approaches. Demos below

Unlock over 100 premium GreenSock tutorials at

Take your scripted animation skills to the next level through over 17 hours of on-demand video training. I'll share with you a decade of experience bringing art to life with code.

GreenSock basic demo

GreenSock circular demo

Vanilla JS demo