Estilo CSS de Gradiente Linear

Aqui temos a explicação estilo, e mais abaixo clique na imagem para download do exemplo HTML completo.

<!--<style type="text/css">
div.box{
background-color:#BOTTOM;
background-image:none;
/*firefox*/
background:-moz-linear-gradient(top, #TOP, #BOTTOM) repeat scroll 0 0 transparent;
/*chorme e outros webkit*/
background:-webkit-gradient(linear, left top, left bottom, from(#TOP), to(#BOTTOM));
/*ie*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#TOP, endColorstr=#BOTTOM);
}
</style>

onde:
#TOP - cor inicial do gradiente
#BOTTOM - cor final do gradiente

-->

Baixar HTML