How can i give text a rainbow color effect?

Question

How could I replicate the above effect? So far I tried the following, but the text is just white:

     h1 {
        background-image: var(--rainbow-gradient,#fff);
        background-size: 100%;
        background-repeat: repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-background-clip: text;
        -moz-text-fill-color: transparent;
        filter: drop-shadow(0 0 2rem #000);
        text-shadow: none!important;
    }

    <H1>Hello world</H1>

Answer 1

Here is a simple working version:

div {
    background: linear-gradient(90deg, red,yellow,green,blue);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 17vw;
    font-weight: bold;
    text-align: center;
}

<div>Hello World</div>

Most browsers support it, but it is non-standard so don't rely on it for crucial things.

Answer 2

If you want one step ahead from the given solution, try this:

HTML :

<h1>Hello World</h1>

CSS:

h1{
    display: inline-block;
    background: linear-gradient(45deg,#ff7e5f,#feb47b,#ffed86,#9feb8f,#5fbfff,#9b8eff);
    background-size: 700% 700%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: grad 3s linear infinite alternate;
}

@keyframes grad{
  0%{
    background-position:0% 50%}to{background-position:100% 50%
  }
}