degradê em css

O efeito degradê é muito usado nos sites em que o desenvolvedor quer transmitir leveza no seu layout. Degradê nada mais é que a transição suave entre as cores. Se antes você provavelmente usava imagens de fundo para fazer esse efeito, com o CSS3 você tem a vantagem de tornar o documento muito mais leve do que se utilizasse uma imagem, gerando ainda mais performance ao seu site.
Com a propriedade “gradient” é possível criarmos efeitos em degradê (gradiente) sem a utilização de imagens, utilizando puro CSS3.
Este efeito só é aceito em navegadores modernos à base de -moz e -webkit, como Safari, Chrome e Firefox, em suas versões recentes.
Cabe salientar que, nem todos os navegadores suportam gradiente com CSS puro.
Para que o browser reconheça esse efeito, será necessário a utilização de filtros correspondentes “-moz” “-webkit”.
Para o funcionamento deste efeito no Internet Explorer, é preciso recorrer a um filtro, porém, só é possível especificar degradês lineares na horizontal ou vertical e somente com duas cores.
Esta propriedade pode ser aplicada no background, em qualquer elemento que você quiser atribuir um efeito degradê na cor de fundo escolhida por você. O efeito pode ser tanto na posição horizontal, quanto na posição vertical.
- Navegadores Safari, Chrome (-webkit)

-webkit-gradient(linear, left top, right top, from(#CCCCCC), to(#000000));
No código acima, os trechos destacados em vermelho, fazem referência a cor inicial do degradê, já os trechos destacados em azul se referem a cor final.

- Navegador Firefox versões 3.6 ou superior (-moz)
-moz-linear-gradient(left, #CCCCCC, #000000); left -> indica que o degradê deve se apresentar horizontalmente, iniciando na cor #CCCCCC sendo finalizado na cor #000000.

- Navegador Internet Explorer:

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#CCCCCC', EndColorStr='#000000');

GradientType=1 indica que o degradê deve se apresentar horizontalmente.