Degradês em CSS sem usar imagens

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.

1. 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));

 

2. Degradê CSS para Firefox 3.6+

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

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

3. CSS Gradient em Internet Explorer

No IE, é preciso recorrer a um filtro:

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

4. 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+ */

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

5. 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.

6. 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.