How to have one word with unique coloring while others are normal?

Question

Image of the wanted output, the "Blockchain" text

I tried this:

<Text style={{color: 'white'}}>Innovate your idea with <Text style={{color: 'red'}}>Blockchain</Text></Text>

Which generates this outcome:

There are two problems, first one I couldn't find a way to have multicolored text in a sentence. Second when i tried to have a uniquely colored word in a sentence it will go to a new line and not stay on the same line.

Answer 1

Thank you @Tom for the the help

In the CSS

 #bc {
    background: -webkit-linear-gradient(left, #5476E9,cyan);
    background: -o-linear-gradient(right, #5476E9,cyan);
    background: -moz-linear-gradient(right, #5476E9,cyan);
    background: linear-gradient(to right, #5476E9,cyan);
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

In the code:

   Innovate your idea with <span id="bc">Blockchain</span>

Reference: Rainbow gradient on text in CSS