Control Gradient Stops with a Range Slider


Months ago I found a CodePen or JSFiddle that displayed a gradient, controlled by a range slider. If I recall correctly, the slider controlled the width of the transition (wide or narrow). The gradient was either an SVG, CSS or Canvas.

I’ve lost it! Which is sad because I wanted to use it to learn the process. The result was far simpler than is shown here.

Can anyone lead me into the right direction?


One that I’ve used in the past is this:

Not sure if this is what you are looking for or not! :slight_smile: