CSS3 – Text Gradient

Text gradient é um efeito bastante simples e interessante que se tornou possível com o CSS3, na verdade este efeito é a aplicação de um gradiente para preenchimento do texto.
Esta forma de se dar a(s) cor(es) ao texto serve para substituir ou utilizar imagens de texto, que anteriormente era a única forma de se conseguir este tipo de efeito.

CSS3 Text Gradient

Existem várias maneiras de se obter o efeito text gradient utilizando o CSS3, no entanto da maneira que vos vou mostrar não é necessário fazer alterações no HTML.

Portanto aplica-se um titulo ao texto onde se deseja o efeito;

Para copiar o código clicar no ícone abaixo

<h2>TEXT GRADIENT</h2>

Para copiar o código clicar no ícone abaixo

h2 {
font-size:60px;
/*background-clip*/
-webkit-background-clip:text;
   -moz-background-clip:text;
        background-clip:text;
-webkit-text-fill-color:transparent;
background: #d0e4f7;
/*linear-gradient*/
background: -moz-linear-gradient(top,  #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea));
background: -webkit-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: -o-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: -ms-linear-gradient(top,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
background: linear-gradient(to bottom,  #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 );
}

Veja o Exemplo anterior:

TEXT GRADIENT

O que se pode modificar

- As cores do Gradient: Basta trocar os valores pelos das cores do seu gradiente, se isso for um pouco complicado para si que não domina o CSS, então vá ao site que lhe vou indicar, escolha ou faça o seu gradiente, copie o código gerado e substitua o do exemplo acima. Note que só deve substituir o código referente às cores e que começa por, background. Aqui

- O tamanho da fonte: font-size:60px; Basta trocar o 60 por outro tamanho.

Lembre-se que este, tal como outros efeitos só serão visíveis em browsers compatíveis com CSS3. Veja este caso, Aqui