# Animating the Color of Four Gradient Stops in a Gradient!

**URL:** <https://forum.kirupa.com/t/animating-the-color-of-four-gradient-stops-in-a-gradient/639276>\
**Category:** random\
**Created:** [January 13, 2019, 1:52am UTC](https://forum.kirupa.com/t/animating-the-color-of-four-gradient-stops-in-a-gradient/639276 "2019-01-13T01:52:29Z")\
**Posts on this page:** 3\
**Page:** 1

<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:** [January 13, 2019, 1:52am UTC](https://forum.kirupa.com/t/animating-the-color-of-four-gradient-stops-in-a-gradient/639276/1 "2019-01-13T01:52:29Z")

</div>

To follow-up on [the discussion here](http://forum.kirupa.com/t/create-a-constant-moving-gradient-with-a-random-color-gen/639266/7), here we have a version that animates colors in a gradient. You can see a [**live version**](http://htmlpreview.github.io/?https://github.com/kirupa/kirupa/blob/master/animations/animating_gradient_colors_four.htm) here, but if you can’t for some reason (ie: you are using IE11), below is a video of it:

You can see the source for it on Github: [**animating\_gradient\_colors\_four.htm**](https://github.com/kirupa/kirupa/blob/master/animations/animating_gradient_colors_four.htm)

I do plan to write a tutorial on this in the future…not **_near_** future @prg9 haha. Hope you all like this.

Cheers,  
Kirupa

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [January 14, 2019, 9:48pm UTC](https://forum.kirupa.com/t/animating-the-color-of-four-gradient-stops-in-a-gradient/639276/2 "2019-01-14T21:48:31Z")

</div>

Cool! I remember a long time ago I tried something similar just by looping through all the colours sequentially from 0 to 0xFFFFFF. It didn’t go well.

---

<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:** [January 14, 2019, 11:07pm UTC](https://forum.kirupa.com/t/animating-the-color-of-four-gradient-stops-in-a-gradient/639276/3 "2019-01-14T23:07:37Z")

</div>

This is one more thing that is made much simpler using [CSS Variables](https://www.kirupa.com/html5/css_variables_js_win.htm) 😛