Quem é que não se lembra daquela época em que os desenvolvedores e designers tinham que usar imagens para criar degradês? Parece que faz uma eternidade, não é mesmo? Mas, felizmente, o tempo voa e agora temos uma solução muito mais prática! É possível criar degradês diretamente com CSS, sem precisar se preocupar com imagens complicadas. Vamos dar adeus a esse pesadelo! ????
Bem, é verdade que os navegadores costumavam ser um pouquinho teimosos e usavam funções próprias para lidar com degradês. Em 2012, degrades não era um atributo oficial do CSS, então, por via das dúvidas, a dica era sempre definir uma background-color intermediária no documento, só pra garantir, né? Melhor prevenir do que remediar!
Olha só esse exemplo simples para criar um degradê que vai do preto (#000000) ao branco (#ffffff) e ser interpretado da mesma maneira no IE, Mozilla, Safari e Chrome:
.fundo-degrade {
background-color: #000;
/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#fff)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#000, endColorstr=#fff);
/* Mozilla */
background: -moz-linear-gradient(top, #000, #fff) repeat-X;
/* Safari, Google Chrome */
background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)) repeat-X;
}
O exemplo acima é do degradê básico. Se você quer outros efeitos degradê, uma boa ferramenta online é o CSS Gradient, aonde você escolhe o estilo de gradiente que mais lhe agrada, personaliza com as cores desejadas e aí e só copiar e colar o código CSS gerado em sua folha de estilos! 
