Ejemplos de degradados en CSS3

Posted January 20, 2019

Aqui te traigo algunos ejemplos de degredados en CSS3 que te ayudarán a entenderlos y crear los tuyos propios, pero si no tienes mucho tiempo para entenderlos;tambien te traigo esta herramienta que te ayudará a crearlos de forma rapida http://www.colorzilla.com/gradient-editor/

HTML base

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Colores</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="box"></div>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

<title>Colores</title>

</head>

<body>

</body>

</html>

Ejemplo N° 01

#box{
	width:500px;
	height:500px;
	background: -webkit-linear-gradient(red,yellow);
	background: -moz-linear-gradient(red,yellow);
	background: -ms-linear-gradient(red,yellow);
	background: -o-linear-gradient(red,yellow);
}

#box{

width:500px;

height:500px;

background: -webkit-linear-gradient(red,yellow);

background: -moz-linear-gradient(red,yellow);

background: -ms-linear-gradient(red,yellow);

background: -o-linear-gradient(red,yellow);

}

Ejemplo N° 02

#box{
	width:500px;
	height:500px;
	background: -webkit-linear-gradient(left,red,yellow,red);
	background: -moz-linear-gradient(left,red,yellow,red);
	background: -ms-linear-gradient(left,red,yellow,red);
	background: -o-linear-gradient(left,red,yellow,red);
}

#box{

width:500px;

height:500px;

background: -webkit-linear-gradient(left,red,yellow,red);

background: -moz-linear-gradient(left,red,yellow,red);

background: -ms-linear-gradient(left,red,yellow,red);

background: -o-linear-gradient(left,red,yellow,red);

}

Resultado

Escala de grises

#box{
	width:500px;
	height:500px;
	background: -webkit-linear-gradient(#000,#fff);
	background: -moz-linear-gradient(#000,#fff);
	background: -ms-linear-gradient(#000,#fff);
	background: -o-linear-gradient(#000,#fff);
}