Cómo hacer un degradado con CSS para todos los navegadores

Fabián Rodríguez · 7 Jun 2011

Hola,
Pues nada, solo estaba haciendo un diseño que tuviera un fondo con degradado y quería usar solamente CSS (sin imágenes de fondo) por lo que estuve buscando como hacerlo en cada navegador, incluidos Internet Explorer 6 y las versiones recientes.

Insertar CODE, HTML o 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);

Ahí se muestra para Opera 11.10, Internet Explorer 6 en adelante, Safari, Chrome y Firefox.

cuisi · 7 Jun 2011

Muy bueno, yo tenía uno que funcionaba en todos menos iexplorer (para variar jeje)

Nachitox · 8 Jun 2011

lo malo de estos códigos es que no valida el css, pero qué va, a google eso no le importa xD, muchas gracias por el aporte.

anferro · 10 Jun 2013

Muchas gracias por el aporte!

Lenny Creative · 16 Jun 2013

buen aporte, tenia una pero esta parece mucho mejor :3
saludos

vellenger · 17 Jun 2013

Ese seria el css , pero como lo aplico con el html?

Lenny Creative · 17 Jun 2013

vellenger dijo:
Ese seria el css , pero como lo aplico con el html?

en el html creas un div: ejemplo:

HTML:

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

y en tu 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 Jun 2013

<div id="fondoweb"></div> ese no es.

Cómo hacer un degradado con CSS para todos los navegadores

Fabián Rodríguez

cuisi

Nachitox

anferro

Lenny Creative

vellenger

Lenny Creative

zahiht

Temas similares