How can I color text with a gradient color which adapts with the screen size and continues the color on the new line?

Question

After writing the following code the color stops at the end of the line and starts again at the next line. I want it to continue and end with a different color till it reaches the end of second line. Then continue doing so.

Here is my css class that I am using on a p tag.

$font: 'Poppins', sans-serif;

.text {
    background: linear-gradient(to right, #000000 0%, #4ad7fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: {
        size: 3vw;
        family: $font;
    };
}

Here is what I am getting:

And here is what I expect:

---

Can I do it without using any javascript? Although javascript is also fine.

Answer 1

Just add a display : inline, and a few red :

.text {
  display: inline;
  background: linear-gradient(to right, #000 0%, blue 25%, #000 50%, red 75%, #000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3vw;
  font-family: "Poppins", sans-serif;
}

<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, quo consectetur similique blanditiis explicabo dolorum quam voluptate, accusamus repellat sed ipsam doloribus facere quas perspiciatis veritatis ad dicta. Tenetur, vero?
</p>