Search code examples
javascripttextcolorstheme-ui

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

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.

Solution

  • 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