Is it possible to apply a different horizontal color gradients to each line of text using CSS

Question

There are several examples of applying a horizontal color gradient to a body of text.

However, the technique used in each of these examples is to make the background have a gradient, and then make the text clear, and then the text will have the gradient.

Examples include

• Is it possible to set horizontal gradient to text via CSS? (left letter one colour, right - another colour)
• Gradient text color
• css text gradient

This will not work for my goal. I am looking to have it such that there will be a different gradient for each line of text. For example, line 1 will have a gradient from red to black. Line two will have a gradient from black to blue. Line 3 will have a gradient from blue to red.

Here is an example of what I am looking for:

I am aware that a radial gradient can be applied as well, but that will also not work as the CSS would have to be readjusted for any variation in text size of text body length.

Answer 1

You can set different backgrounds, one for each line. But I don't see a way to adapt this for a huge number of lines

p {
    background-image: linear-gradient(to right, red, blue), 
    linear-gradient(to right, green, yellow), linear-gradient(to right,purple, cyan);
    background-size: 100% 1.2em;
    background-position: left 0, left 1.2em, left 2.4em;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 30px;
}

<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>