Control Gradient Stops with a Range Slider


#1

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?


#2

One that I’ve used in the past is this: https://www.cssmatic.com/gradient-generator

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