Como fazer degradê no texto CSS

Como fazer degradê no texto CSS

Texto com degradê em CSS, este tutorial mostra como criar degradê no texto com Css3.

Gradiente linear

Neste tutorial você vai aprender como adicionar um efeito de gradiente no texto usando a propriedade CSS background-clip. A saída final do texto usando este efeito é mostrada logo abaixo. As propriedades CSS que seriam usadas são, background-clip e -webkit-background-clip e o fundo.

Seção HTML: esta seção contém a marcação HTML que conterá o texto que deve ser estilizado.

O texto foi agrupado nas tags <h1>, <h2> e <h3>. O gradiente também foi adicionado nas classes abaixo Veja o nome de cada class no html:

.title-degrade-loop-nerd {}
.title-degrade-love {}
.title-degrade-cafe {}

Cada class você poderá usar: <h1>, <h2>, <h3>, <h4> ou <h5>.

Códigos HTML:

  <h1 class="title-degrade-loop-nerd"><i class="icon icon-code"></i> Loop Nerd</h1>
  <h2 class="title-degrade-love"><i class="icon icon-heart-5"></i> Im Love You</h2>
  <h3 class="title-degrade-cafe"><i class="icon icon-coffee"></i> Café Expresso</h3>

Seção CSS: Nesta seção, usaremos algumas propriedades CSS para projetar o efeito Degradê no texto.

Códigos Css:

.title-degrade-loop-nerd {

    font-size: 2em;
    font-family: 'open_sansbold';
    width:100%;
    float:left;
    border-bottom:1px #e8e8e8 solid;
    padding-bottom:10px;
    margin-bottom:10px;
        
    /* Definir o plano de fundo do texto */
    background: linear-gradient(to right, #00ccd5 10%, #00131c 15%);
    display: inline-block;

    /*Recorte o fundo até o texto*/
    -webkit-background-clip: text;
    background-clip: text;
  
    /*Defina a cor do texto para transparente*/
    color: transparent;

}

.title-degrade-love {

    font-size: 2em;
    font-family: 'open_sansbold';
    width:100%;
    float:left;
    border-bottom:1px #e8e8e8 solid;
    padding-bottom:10px;
    margin-bottom:10px;
        
    /* Definir o plano de fundo do texto */
    background: linear-gradient(to right, #f00 5%, #fd7b7b 11%);
    display: inline-block;

    /*Recorte o fundo até o texto*/
    -webkit-background-clip: text;
    background-clip: text;
  
    /*Defina a cor do texto para transparente*/
    color: transparent;

}

.title-degrade-cafe {

    font-size: 2em;
    font-family: 'open_sansbold';
    width:100%;
    float:left;
    border-bottom:1px #e8e8e8 solid;
    padding-bottom:10px;
    margin-bottom:10px;
        
    /* Definir o plano de fundo do texto */
    background: linear-gradient(to right, #884a4a 15%, #ff6000 20%);
    display: inline-block;

    /*Recorte o fundo até o texto*/
    -webkit-background-clip: text;
    background-clip: text;
  
    /*Defina a cor do texto para transparente*/
    color: transparent;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Baixar Código Veja Funcionando