Gradiente CSS cross browser: degradês em CSS sem usar imagens

CSS3 ainda não é um padrão W3C oficial e, até que chegue a este status, muita coisa muda. Para o caso de degradês com CSS puro, confira o artigo The new (and hopefully final) linear gradient syntax. Em função disto, este artigo está oficialmente desatualizado.

O recurso de gradiente (degradê) CSS foi introduzido pelo Webkit há cerca de 2 anos, mas raramente era utilizado devido à incompatibilidade com a maioria dos browsers. Mas agora, com o Firefox 3.6+, que suporta gradientes, é possível criar degradês sem usar imagens! E o código CSS para gradiente funciona nos principais navegadores: IE, Firefox 3.6+, Safari e Chrome.

Este é um artigo traduzido do original “Cross-Browser CSS Gradient”, do blog WebDesignerWall, e sofreu algumas adaptações.

Gradiente CSS para browsers Webkit

A seguinte linha de código é para navegadores WebKit, como Safari, Chrome, etc. Serve para exibir um gradiente linear de cima (#CCC) para baixo (#000).

background: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000));

Degradê CSS para Firefox 3.6+

Para Firefox 3.6+, usa-se -moz-linear-gradient:

background: -moz-linear-gradient(top, #CCC, #000);

CSS Gradient em Internet Explorer

No IE, é preciso recorrer a um filtro:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCCCCC', endColorstr='#000000');

Degradê com CSS em todos os navegadores (cross-browser)

background: #999; /* para browsers sem suporte a CSS 3 */

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* Firefox 3.6+ */

Atualização: Existe uma ótima ferramenta para gerar degradês com CSS: Ultimate CSS Gradient Generator.

Limitações do Internet Explorer

O filtro de gradiente do Internet Explorer não suporta color-stop, gradient angle e radial gradient. Isso significa que só é possível especificar degradês lineares na horizontal ou vertical com duas cores: StartColorStr e EndColorStr.

Atualização: O leitor Renatho indicou uma maneira de trabalhar com gradientes no Internet Explorer 9.

Notas finais sobre degradês com CSS puro

É importante ter em mente que nem todos os navegadores suportam gradiente com CSS puro. Por garantia, o ideal é não depender do CSS para fazer degradês; o ideal é utilizar o recurso para melhorar o web design.