colorazione testo

[merovese]

Ciao a tutti dopo varie ricerche sul web sono riuscito ad ottenere la formattazione del testo con alcune parole scritte in diversi colori, solo che alcune di queste mi occorrono di 2 colori quindi ho puntato sul gradient

ma nel mio caso non riesco ad inserirlo, vi posto il mio codice

css:

body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 00;
font-size: 1em;
color: #ffffff;
background-color:#000000;
}
h1 {
font-size: 3.8em;
line-height: 1em;
font-weight: 700;
color: #B8860B;
}


h2 {
font-size: 2em;
line-height: 1em;
font-weight: 400;
color: #B8860B;
text-align: justify;
}


.text-gold {color: #B8860B}
.text-blue {color: #0000FF}
.text-orange {color: #FF9900}
.text-red {color: #FF0000}
.text-yellow {color: #FFFF00}
.text-yellow2 {color: #FFD800}
.text-lightblue {color: #99CBFF}
.text-magenta {color: #FF00FF}
.text-withe {color: #FFFFFF}

html

<div class="col-sm-12">
<h1>La Nostra Storia</h1>
<h2>blablablablablabla (<span class="text-blue">ciao1</span>, <span class="text-orange">ciao2</span>, <span class="text-red">ciao3</span>, <span class="text-yellow">ciao4</span>, <span class="text-lightblue">ciao5</span>,<span class="text-yellow2">ciao6</span>).
blablablablablabla</h2>
</div>
</div>
</div>





come si po' vedere il testo è h2 e alle parole CIAO ho assegnato altri colori tramite le span class, ma la storia si complica quando alle parole ciao5 e ciao6 devo assegnare un doppio colore, ad esempio giallo e rosso per ciao5 e bianco e blu per ciao6, gli esempi che ho trovato sul web applicano il gradient al testo h1, ma se io effettuo tale modifica sul mio testo la formattazione va a farsi benedire.
Qualche idea? aiuto? grazie!

Moderazione: Stesso argomento stessa discussione. Per il momento ho unito le due discussioni ma in futuro evita di aprire discussioni multiple.
Inoltre per postare del codice sul forum è opportuno usare gli appositi tag di formattazione. Vedere il regolamento. Grazie!