CSS IMAGENES: Gradiente de «arcoíris (rainbow)»

Aplicar efectos a textos que decoro en la formulación de títulos, es algo que me agrada. Investigo diferentes métodos decorativos. Uno que encuentro muy soberbio es el "efecto arco iris" que en este post dejo plasmados los correspondientes html y css.

Textos con efecto arcoiris (rainbow)

El html

 

<h2> Texto Rainbow </h2>

El css

 

  <style>

h2.htyl {
  margin-top: 0px;
  margin-bottom: 50px;
  text-align: center;
  font-family: sans-serif;
  font-size: 3rem;
  letter-spacing: 0.15rem;
  text-transform: uppercase;
  color: #fff;
  background-color: #f5aFaf;
  text-shadow: -4px 4px #ef3550,
               -8px 8px #f48fb1,
               -12px 12px #7e57c2,
               -16px 16px #2196f3,
               -20px 20px #26c6da,
               -24px 24px #43a047,
               -28px 28px #eeff41,
               -32px 32px #f9a825,
               -36px 36px #ff5722;
}


 </style>

Resultado

Texto Rainbow

Letras con estilo arcoiris

El html

 

<h2 class="rainbow-letters>">
   <span> R </span>
   <span> a </span>
   <spa>  i </span>
   <span> n </span>
   <span> b </span>
   <span> o </span>
   <span> w </span>
</h2>
</style>

El CSS

 

  <style> 
.rainbow-letters {
  background:#dfecfa;
  font-size: 40px;
  text-align:center;
  font-family: sans-serif;
  text-transform: uppercase;
}

.rainbow-letters span:nth-child(10n + 1) {
  color: #ef5350;
}

.rainbow-letters span:nth-child(10n + 2) {
  color: #ab47bc;
}

.rainbow-letters span:nth-child(10n + 3){
  color: #651fff;
}

.rainbow-letters span:nth-child(10n + 5){
  color: #3949ab;
}

.rainbow-letters span:nth-child(10n + 4) {
  color: #2196f3;
}

.rainbow-letters span:nth-child(10n + 6){
  color: #00bcd4;
}

.rainbow-letters span:nth-child(10n + 7){
  color: #4caf50;
}

.rainbow-letters span:nth-child(10n + 8){
  color: #ffc107;
}

 </style>

Resultado