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

> Crie gradientes CSS cross-browser sem imagens. Técnica completa para degradês compatíveis com todos os navegadores usando CSS puro. Funciona mesmo!

URL: https://dpw.dev/css/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/  
Publicado em: 2010-06-08  
Categoria: css  
Tags: interface, web-design  
Autor: Tárcio Zemel

![Gradiente CSS cross-browser: degrades css sem uso de imagens](/images/blog/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/gradiente-css-cross-browser-degrades-css-sem-usar-imagens.webp)

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](http://www.broken-links.com/2012/01/11/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.

> Artigo baseado em [Cross-Browser CSS Gradient](http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/).

## 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ê CC cross browser em webkit](/images/blog/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/gradiente-css-cross-browser-webkit.gif)

## Degradê CSS para Firefox 3.6+

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

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

![Degrade CSS cross browser: Firefox 3.6+](/images/blog/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/degrade-css-cross-browser-firefox.gif)

## CSS Gradient em Internet Explorer

No IE, é preciso recorrer a um filtro:

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

## ![CSS Gradient cross browser: Internet Explorer](/images/blog/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/css-gradient-cross-browser-ie-internet-explorer.gif)Degradê com CSS em todos os navegadores (cross-browser)

```javascript
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+ */
```

<figure>
  <img src="/images/blog/gradiente-css-cross-browser-degrades-css-sem-usar-imagens/css-gradient-crossbrowser-box.webp" alt="Exemplo de CSS degradê (gradiente) crossbrowser" />
  <figcaption>](http://www.webdesignerwall.com/demo/gradient-box.html)</figcaption>
</figure>

**Atualização:** Existe uma ótima ferramenta para gerar degradês com CSS: [Ultimate CSS Gradient Generator](http://www.colorzilla.com/gradient-editor/).

## 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](http://www.grifotecnologia.com.br/blog/css/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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml