# Control Gradient Stops with a Range Slider

**URL:** <https://forum.kirupa.com/t/control-gradient-stops-with-a-range-slider/639695>\
**Category:** programming\
**Created:** [April 21, 2019, 10:26pm UTC](https://forum.kirupa.com/t/control-gradient-stops-with-a-range-slider/639695 "2019-04-21T22:26:05Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [April 21, 2019, 10:26pm UTC](https://forum.kirupa.com/t/control-gradient-stops-with-a-range-slider/639695/1 "2019-04-21T22:26:05Z")

</div>

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](https://cssgradient.io).

Can anyone lead me into the right direction?

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 22, 2019, 9:03pm UTC](https://forum.kirupa.com/t/control-gradient-stops-with-a-range-slider/639695/2 "2019-04-22T21:03:52Z")

</div>

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

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