Um poderoso editor de gradiente CSS semelhante ao Photoshop
|
Opacidade:
|
Localização: | % | ||
Cor: |
Localização: | % |
| IE | Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Navegador Android | Chrome para Android |
|---|---|---|---|---|---|---|---|---|
| 6 - 8
Suporte parcial usando sintaxe filter
Uso do navegador: 0.03%
|
4 - 9
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suporte |
4 - 5
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suporte |
3.2 - 4.3
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suporte |
2.1 - 3
Suporte usando a antiga sintaxe -webkit-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suporte |
||||
| 9
Suporte parcial usando sintaxe filter
Suporte total usando SVG (selecione "suporte IE9") Uso do navegador: 0.05% Selecione "Maximizar compatibilidade" para suporte |
3.6 - 15
Suporte usando prefixo -moz-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suporte |
10 - 25
Suporte usando prefixo -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suporte |
5.1 - 6
Suporte usando prefixo -webkit-
Uso do navegador: 0.01% Selecione "Maximizar compatibilidade" para suporte |
11.1 - 11.5
Suporte usando prefixo -o-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suporte |
5.1 - 6.1
Suporte usando prefixo -webkit-
Uso do navegador: 0% Selecione "Maximizar compatibilidade" para suporte |
4 - 4.3
Suporte usando prefixo -webkit-
Uso do navegador: 0.09% Selecione "Maximizar compatibilidade" para suporte |
||
| 10+
Suporte total (sem prefixo)
|
12+
Suporte total (sem prefixo)
|
16+
Suporte total (sem prefixo)
|
26+
Suporte total (sem prefixo)
|
6.1+
Suporte total (sem prefixo)
|
12+
Suporte total (sem prefixo)
|
7.1+
Suporte total (sem prefixo)
|
4.4+
Suporte total (sem prefixo)
|
46+
Suporte total (sem prefixo)
|
(?)
Links para a documentação de gradientes CSS: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].
O Ultimate CSS Gradient Editor foi criado por Alex Sirota. Se você gosta desta ferramenta, confira o ColorZilla para ferramentas mais avançadas, como conta-gotas, selecionadores de cores, editores de paleta e analisadores de sites.
Como você deve saber, HTML5 introduziu muitos recursos interessantes para desenvolvedores web. Um dos recursos é a capacidade de especificar gradientes usando apenas CSS3, sem ter que criar imagens e usá-las como fundos repetidos para efeitos de gradiente.
Importante: Você precisará de uma versão recente do Firefox, Chrome, Safari, Opera ou IE para usar este Gerador de Gradiente. Os gradientes CSS resultantes são cross-browser - eles funcionarão nesses navegadores e também reverterão para um gradiente mais simples em versões mais antigas do Internet Explorer.
O controle principal de gradiente permite que você:
O painel 'Visualização' permite visualizar o gradiente atual como um gradiente vertical ou horizontal, e também permite visualizar rapidamente como o gradiente de fallback do Internet Explorer ficará no IE.
Por fim, o painel 'CSS' sempre tem o CSS para o gradiente atual para fácil cópia e colagem em sua folha de estilo. Você também pode usar este painel para importar um CSS de gradiente existente para a ferramenta.
As predefinições de gradiente 'Ultimate Web 2.0 Gradients' foram derivadas do trabalho de deziner folio e SGlider12.
O Seletor de Cores é uma adaptação menor de John Dyer's Color Picker.
A função de codificação Base-64 é de webtoolkit.
Alguns ícones por Yusuke Kamiyamane.