Efeito de arco-íris em texto criado com CSS

Neste rápido artigo, vamos criar um efeito muito parecido com o arco-íris. O efeito em questão usa as propriedades gradiente do CSS3, assim, deixando-o muito legal.

CSS ao Extremo; Vamos tentar algo novo?

HTML

<h1 class="texto-c">CSS ao Extremo; Vamos tentar algo novo?</h1>

CSS

.texto-c {
  font-size:36px;
  -webkit-background-clip: text;
  color: white;
  -webkit-text-fill-color: transparent;
  background-color:#FFF;
  background-image: -webkit-gradient(linear,left top,right top,from(#ea8711), to(#d96363));
  background-image: -webkit-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
  background-image: -moz-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
  background-image: -ms-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
  background-image: -o-linear-gradient(left,#ea8711,#d96363,#73a6df,#9085fb,#52ca79);
}

Obs: Este efeito foi testado apenas no Google Chrome, diga-nos se ele funciona em outros navegadores.