create a Constant Moving Gradient with a Random Color Gen?


#1

I’m about 3 months into coding, and for a website element I need a constantly moving Gradient that goes between random colors, like a random rainbow gradient or something similar, but I’m not sure where to start with this idea
Also I’m trying to make it for a button, like the outline of the buttons needs to be an animated gradient that constantly moves through random colors. I’m assuming someone has some kind of code I can use or start with, or atleast guide me in the right direction? I’m not trying to make a big project, just a small button gradient for something in my website


#2

Skyler - that is an interesting problem! The bulk of the work is in actually generating the colors and setting the colors to the gradient syntax. Are you thinking of a radial gradient or a linear one?


#3

Skyler - as it turns out, there is no easy way to generate random colors for a gradient and animate between them. It isn’t supported in CSS, so you’ll have to use JavaScript. I’m playing with this right now, so hopefully I will have something to share soon.


#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="container">

  </div>

  <script>
    var newHue1;
    var newHue2;

    var currentHue1;
    var currentHue2;

    var hueDiff1;
    var hueDiff2;

    var incrementer1 = 0;
    var incrementer2 = 0;

    var counter = 0;
    var iterations = 200;

    function setNewColor() {

      var bodyStyle = getComputedStyle(document.body);

      currentHue1 = Number(bodyStyle.getPropertyValue("--hue1"));
      currentHue2 = Number(bodyStyle.getPropertyValue("--hue2"));

      newHue1 = getRandomNumber(0, 360);
      newHue2 = getRandomNumber(0, 360);

      hueDiff1 = newHue1 - currentHue1;
      hueDiff2 = newHue2 - currentHue2;

      incrementer1 = hueDiff1 / iterations;
      incrementer2 = hueDiff2 / iterations;
    }

    function animate() {

      if (counter == 0) {
        setNewColor();
      }
      
      counter++;

      currentHue1 += incrementer1;
      currentHue2 += incrementer2;

      if (counter == iterations) {
        counter = 0;
      }

      document.body.style.setProperty("--hue1", currentHue1);
      document.body.style.setProperty("--hue2", currentHue2);

      requestAnimationFrame(animate);
    }
    animate();

    function getRandomNumber(low, high) {
      var r = Math.floor(Math.random() * (high - low + 1)) + low;
      return r;
    }
  </script>
</body>

</html>

This isn’t optimized or cleaned-up code, but it may help you get unblocked. I’ll fiddle with this some more over the next few hours. Here is a video of what this looks like:

Cheers,
Kirupa


#5

You could maybe “simulate the appearance of random” with CSS only. If enough colors stops are used throughout the gradient, of course it would eventually cycle back through and repeat.

But would the average user notice, given the result of the effect as the animation occurs unless they literally stop and stare at the effect for the entire duration? Otherwise yes, JS to the rescue. :wink:


#6

You are correct that the average user would probably not notice. Setting many gradient stops on a really large background and shifting the background position can totally simulate something similar. This is extra true if what you are setting the gradient on is a border where what you see is so limited, you may not even notice the background shifting to create the final effect :slight_smile: