<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
height:200px;
width:600px;
padding:10px;
}
input[type=button]{
padding:10px;
}
.degradado{
background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#808080));
background: -moz-linear-gradient(center top , #cccccc, #808080);
background: -o-linear-gradient(center top , #cccccc, #808080);
background: -ms-linear-gradient(center top , #cccccc, #808080);
background: linear-gradient(center top , #cccccc, #808080);
}
</style>
</head>
<body>
<div class='degradado'>
El fonde de este div tiene un degradado
<p>
<strong>linear-gradient (origen del degradado, color origen, color destino)</strong>
<p>
origen del degradado: tiene que indicar donde empieza el degradado (center top, top left, ...)
<br>color origen: determina el color inicial (#cccccc)
<br>color destino: determina el color final del degradado (#808080)
</p>
</p>
</div>
<p>
<input type="button" class='degradado' value="Ejemplo de botón">
</p>
</body>
</html>