Como fazer um degradê com CSS para todos os navegadores

Fabián Rodríguez · 07/06/2011

Olá,
Bem, apenas estava fazendo um design que tivesse um fundo com degradê e queria usar somente CSS (sem imagens de fundo), por isso estive procurando como fazer em cada navegador, incluindo Internet Explorer 6 e as versões recentes.

Inserir CODE, HTML ou PHP:

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.7, #fff));
background: -moz-linear-gradient(top, #00abeb, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00abeb', endColorstr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00abeb', endColorstr='#ffffff')";
background: -o-linear-gradient(top, #00abeb, #ffffff);

Ali mostra para Opera 11.10, Internet Explorer 6 em diante, Safari, Chrome e Firefox.

cuisi · 07/06/2011

Muito bom, eu tinha um que funcionava em todos menos iexplorer (para variar hehe)

Nachitox · 08/06/2011

o ruim desses códigos é que não valida o css, mas que nada, para o google isso não importa xD, muito obrigado pela contribuição.

anferro · 10/06/2013

Muito obrigado pela contribuição!

Lenny Creative · 16/06/2013

boa contribuição, eu tinha um mas este parece muito melhor :3
abraços

vellenger · 17/06/2013

Esse seria o css, mas como aplico com o html?

Lenny Creative · 17/06/2013

vellenger disse:
Esse seria o css, mas como aplico com o html?

no html você cria uma div: exemplo:

HTML:

<div id="fondoweb"></div>

e no seu css,

HTML:

#fondoweb {
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.7, #fff));
background: -moz-linear-gradient(top, #00abeb, #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00abeb', endColorstr='#ffffff');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00abeb', endColorstr='#ffffff')";
background: -o-linear-gradient(top, #00abeb, #ffffff);
}

zahiht · 17/06/2013

<div id="fondoweb"></div> esse não é.

Como fazer um degradê com CSS para todos os navegadores

Fabián Rodríguez

cuisi

Nachitox

anferro

Lenny Creative

vellenger

Lenny Creative

zahiht

Tópicos similares