# Background Gradient change on scrolling + transition with JS

**URL:** <https://forum.kirupa.com/t/background-gradient-change-on-scrolling-transition-with-js/655914>\
**Category:** Uncategorized\
**Created:** [January 2, 2023, 1:34am UTC](https://forum.kirupa.com/t/background-gradient-change-on-scrolling-transition-with-js/655914 "2023-01-02T01:34:33Z")\
**Posts on this page:** 1\
**Showing post:** 3

<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 2, 2023, 4:24pm UTC](https://forum.kirupa.com/t/background-gradient-change-on-scrolling-transition-with-js/655914/3 "2023-01-02T16:24:55Z")

</div>

I am not on my laptop to test this, but I wonder if we can use a CSS Custom Property for the color part of a gradient and animate its value depending on where in the page you are.

Take a look at this example from a few years ago that highlights how you can do this:

> [@create a Constant Moving Gradient with a Random Color Gen?](http://forum.kirupa.com/t/create-a-constant-moving-gradient-with-a-random-color-gen/639266/4):
>
> Ok - here is a way of animating gradient colors using JavaScript: \<!DOCTYPE html\> \<html\> \<head\> \<title\>Animated Gradients\</title\> \<style\> body { margin: 0px; padding: 0px; --hue1: 176; --hue2: 341; } #container { width: 100vw; height: 100vh; background: radial-gradient(50% 50% at 50% 50%, hsl(var(--hue1), 90%, 80%, 1) 0%, hsl(var(--hue2), 90%, 80%, 1) 100%) 50% 50% / 100% 100% no-repeat; } \</style\> \</head\> \<body\> \<div id="con…

---

_[View the full topic](https://forum.kirupa.com/t/background-gradient-change-on-scrolling-transition-with-js/655914)._