CODEWITHSUNDEEP
javascripthtmlcsswebkit
Senpai Saitama
Senpai Saitama

Reputation: 313

How do I make a colour-changing text gradient with JavaScript?

I'm trying to make a gradient that changes colours every 400ms. The way I did it was I used someone else's random colour changer, and added it to an h1 tag, so it changes. It worked when I did it without gradients, but once I tried adding a gradient, it didn't work at all. This is my code without the gradient:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Word Animation</title>
    <style>
        body {
            background-color: black;
        }
        h1 {
            transition:300ms;
            text-align: center;
            vertical-align: middle;
            font-size: 200px;
            font-family: Impact, Arial,serif;
        }
    </style>
</head>
<body>
  <h1 id="h1">RANDOM TEXT</h1>
  <script>
      function getRandomColor() {
          var letters = '0123456789ABCDEF';
          var color = '#';
          for (var i = 0; i < 6; i++ ) {
              color += letters[Math.floor(Math.random() * 16)];
          }
          return color;
      }
      function title() {
          document.getElementById("h1").style.color = getRandomColor();
          setTimeout(title, 300);
      }
      title();
  </script>
</body>
</html>

That works, but this is it with the gradient:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Word Animation</title>
  <style>
    body {
      background-color: black;
    }
    h1 {
      transition: 300ms;
      text-align: center;
      vertical-align: middle;
      font-size: 200px;
      font-family: Impact, Arial, serif;
      background: -webkit-linear-gradient(blue, red);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>

<body>
  <h1 id="h1">RANDOM TEXT</h1>
  <script>
    function getRandomColor() {
      var letters = '0123456789ABCDEF';
      var color = '#';
      for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    function title() {
      document.getElementById("h1").style.background = "-webkit-linear-gradient(", getRandomColor(), ",", getRandomColor();
      setTimeout(title, 300);
    }
    title();
  </script>
</body>

</html>

Please help. Thanks in advance :)

Upvotes: 3

Views: 3669

Answers (2)

Văn Quyết
Văn Quyết

Reputation: 2526

You need to set:

background: -webkit-linear-gradient(red, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

together. (I don't know why??, but it worked for me);

JS

var s = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(s);
function title() {
  s.innerHTML = "h1 {\n\
        background: -webkit-linear-gradient(" + getRandomColor() + ", " + getRandomColor() + ");\n\
        -webkit-background-clip: text;\n\
        -webkit-text-fill-color: transparent;\n\
    }";
  setTimeout(title, 300);
}
title();

Upvotes: 2

user5734311
user5734311

Reputation:

You need to concatenate the string using plus signs, not commas.

var col = "-webkit-linear-gradient(" + getRandomColor() + ", " + getRandomColor() + ")";
document.getElementById("h1").style.background = col;

Upvotes: 1

Related Questions