Html y Css
Tutoriales y soluciones para desarrollo web

Background gradient

Ejemplos de fondos de un contenedor con efecto degradados empleando las nuevas propiedades de css3. Con esta propiedad podrás crear un fondo para tu web o cualquier contenedor sin la necesidad de emplear imágenes y así reducir los tiempos de descarga de tu web.

Navegadores:

Internet explorerChromeFirefoxSafariOpera
linear-gradient10.026 (10 -webkit-)16 (3.6 -moz-)6.1 (5.1 -webkit-)12.1 (11.1 -o-)
radial-gradient10.026 (10 -webkit-)16 (3.6 -moz-)6.1 (5.1 -webkit-)12.1 (11.6 -o-)

Background linear gradient

.bg-div{
    background: -webkit-linear-gradient(30deg, #880E4F, #F06292);
    background: -moz-linear-gradient(30deg, #880E4F, #F06292);
    background: -o-linear-gradient(30deg, #880E4F, #F06292);
    background: linear-gradient(30deg, #880E4F, #F06292);
}
[full]
Anterior
Siguiente
background: linear-gradient(30deg, #FF0000, #FF0000);


Background radial gradient

.bg-div{
    background: -webkit-radial-gradient(circle, #7b4397 30%, #dc2430);
    background: -moz-radial-gradient(circle, #7b4397 30%, #dc2430);
    background: -o-radial-gradient(circle, #7b4397 30%, #dc2430);
    background: radial-gradient(circle at top right, #7b4397 30%, #dc2430);
}
[full]
Anterior
Siguiente
background: radial-gradient(circle at top right , #FF0000, #FF0000 );