Multi-Colored text using only CSS

Question

I'm not sure whether my headline adequately conveyed what I was talking about, but I'll clarify below.

I want to use solely CSS to give each character in a string of text a different color.

This is useless to me, and it takes a little time regardless:

<!--I don't want this, and I cannot use it-->
<span style="font-family: tahoma">
<span style="color: red">U</span>
<span style="color: blue">s</span>
<span style="color: red">e</span>
<span style="color: blue">r</span>
<span style="color: red">n</span>
<span style="color: blue">a</span>
<span style="color: red">m</span>
<span style="color: blue">e</span>
</span>

I want this and can only use this:

<span class="username">Username</div>

Where "username" would be defined by CSS. That CSS is what I need. This would also obviously have the same effect as the HTML version.

The reason I need it to be only in CSS is that I'm using this code on Xenforo Usernames. I've seen it done before, so I know it is very well possible. I've googled for about half an hour, experimented with gradients, but couldn't duplicate it. I'm hoping somebody out there can help.

Answer 1

Put your text inside a span> tag and give it the class "multicolortext." The CSS background-image property is then required to add a gradient backdrop to your text with its "linear-gradient" value, where you enter the names of your desired colours.