Cada vez que eu vejo um layout com algum tipo de degrade chega a me dar coceira, me vejo recordando um png em milhares de pequenos pedacinhos para poder fazer os gradientes pq os navegadores ainda não implementaram o código de gradiente do css3, como a minha vida seria mais fácil.
Se funcionasse via css seria somente fazer algo assim:
.div_qualquer { background: -webkit-gradient(linear, left top, left bottom, from(#dfdfdf), to(#f3f3f3)); background: -moz-linear-gradient(top, #dfdfdf, #f3f3f3); }
Mas isto exclui o IE, e é bem difícil explicar aos clientes.
Outra forma é recortar uma imagem em 1px de largura ou altura, deixar ela bem comprida ou larga e usar ela como bg e replicar ela um montão de vezes, assim:
.div_qualquer { background: url(images/background.png) top repeat-x; }
Então pesquisando um pouco me surgiu uma opção usando jQuery muito simples que faz isto extremamente bem. Escrito pelo grande Brandon Aaron (contribuidor do jQuery) e fez o jquery-gradient, que de uma forma bem simples pode criar os gradientes para vc, mas ou menos desta forma:
<script type="text/javascript"> // <![CDATA[ $(document).ready(function(){ $('.div_qualquer').gradient({ from: 'dfdfdf', to: 'f3f3f3' }); }); // ]]> </script>
O que o script faz é criar um bando de divs de 1px diminuindo as cores aos pouquinhos para fazer o degrade linear. Realmente funciona bem para pequenos objetos, mas para objetos muito grandes pode ficar muito pesado e até travar o browser.
Fonte: Rafael Cirolini/NerdHead