Tutorial- letras em degradê

E ai pessoal como é que vão. hoje eu irei ensinar um tutorial que me pediram para fazer e que deixa os  textos bem fofo e cute que nem o nome de (Clarice Lispector da postagem anterior.) E o melhor é que foi eu que criei esses códigos , mentira eu só modifiquei os códigos de um outro tutorial e acabou dando certo. então cliquem em leia mais...

O tutorial é bem fácil é só você irem em modelo-editar html-expandir modelos de Widgets- e clicar em f3.

Quando abrir a caixinha de pesquisa vocês procuram pela tag]]></b:skin> 

Acima dessa tag cole o seguinte código

 }.Pink {

  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #FF69B4), color-stop(0.15, #FF0000), color-stop(0.3, #FFB6C1), color-stop(0.45,#FF34B3), color-stop(0.6, #FF83FA),color-stop(0.75, #C71585), color-stop(0.9, #FF6EB4), color-stop(1, #FFC0CB) );

  color:transparent;

  -webkit-background-clip: text;

}

visualizem e se estiver tudo certo com o seu blog salve, agora para aparecer a letra colorida você tem que colocar esse código no html do post

<div class="Pink">escreva aqui o texto que você quer que apareça o efeito </div> 

Pronto tá ai seu efeito degradê para outras cores é só usar outro código, e você também pode usar mais de um código
verde-


.green {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #006400), color-stop(0.15, #66CDAA), color-stop(0.3, #7FFFD4), color-stop(0.45, #20B2AA), color-stop(0.6, #54FF9F),color-stop(0.75,#CAFF70), color-stop(0.9, #90EE90), color-stop(1, #43CD80) );
  color:transparent;
  -webkit-background-clip: text;
}
amarelo-

.yellow {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #FFFF00), color-stop(0.15, #FFEC8B), color-stop(0.3, #FFFF00), color-stop(0.45,#FFFACD), color-stop(0.6, #EEEE00),color-stop(0.75, #FFB90F), color-stop(0.9, #FFD700), color-stop(1, #FFF68F) );
  color:transparent;
  -webkit-background-clip: text;
}
azul-

.blue {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #00BFFF), color-stop(0.15,#87CEFF), color-stop(0.3, #00F5FF), color-stop(0.45,#00008B), color-stop(0.6, #98F5FF),color-stop(0.75, #1E90FF), color-stop(0.9, #B0E2FF), color-stop(1, #4876FF) );
  color:transparent;
  -webkit-background-clip: text;
}
laranja-

.orange {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #FFA500), color-stop(0.15, #FF7F00), color-stop(0.3, #FF7256), color-stop(0.45,#FF6347), color-stop(0.6, #FF8247),color-stop(0.75, #FF6347), color-stop(0.9, #FF7F24), color-stop(1, #EE6A50) );
  color:transparent;
  -webkit-background-clip: text;
}
vermelho-

.red {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #FF3030), color-stop(0.15, #FF6A6A), color-stop(0.3, #FF0000), color-stop(0.45, #FF4040), color-stop(0.6, #FF4500),color-stop(0.75,#FF6A6A), color-stop(0.9, #CD2626), color-stop(1, #EE4000) );
  color:transparent;
  -webkit-background-clip: text;
}
violeta-

.purple {
  background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #A020F0), color-stop(0.15, #9370DB), color-stop(0.3, #8470FF), color-stop(0.45,#AB82FF), color-stop(0.6, #D15FEE),color-stop(0.75, #551A8B), color-stop(0.9, #836FFF), color-stop(1, #6959CD) );
  color:transparent;
  -webkit-background-clip: text;
}


Agora os codigos do html das postagens-
verde-<div class="green">escreva aqui o texto que você quer que apareça o efeito </div> 
amarelo-<div class="yellow">escreva aqui o texto que você quer que apareça o efeito </div> 
azul-<div class="blue">escreva aqui o texto que você quer que apareça o efeito </div> 
laranja<div class="orange">escreva aqui o texto que você quer que apareça o efeito </div> 
vermelho-<div class="red">escreva aqui o texto que você quer que apareça o efeito </div> 
violeta-<div class="purple">escreva aqui o texto que você quer que apareça o efeito </div> 

para ver todos os efeitos clique aqui.
bjs e fiquem com Deus