Aplicar Degradados a un Elemento con HTML5 y CSS3

Aplicar Degradados a un Elemento con HTML5 y CSS3 Descripción:

Descripción:

Un ejemplo claro y sencillo para poder aplicar degradados a nuestros elementos html al momento de maquetar.

El código sería algo sensillo:

<div class="degradado"> El fonde de este div tiene un degradado<br /> <b>linear-gradient (origen del degradado, color origen, color destino)</b><br /> origen del degradado: tiene que indicar donde empieza el degradado (center top, top left, ...)<br /> color origen: determina el color inicial (#BFBFFF)<br /> color destino: determina el color final del degradado (#4D4DFF) </div> <input class="degradado" type="button" value="Ejemplo de botón" /> <br /> <style> div{ height:200px; width:600px; padding:10px; } input[type=button]{ padding:10px; } .degradado{ background: -webkit-gradient(linear, left top, left bottom, from(#BFBFFF), to(#4D4DFF)); background: -moz-linear-gradient(center top , #BFBFFF, #4D4DFF); background: -o-linear-gradient(center top , #BFBFFF, #4D4DFF); background: -ms-linear-gradient(center top , #BFBFFF, #4D4DFF); background: linear-gradient(center top , #BFBFFF, #4D4DFF); } </style>

El Resultado Final será este:

El fonde de este div tiene un degradado
linear-gradient (origen del degradado, color origen, color destino)
origen del degradado: tiene que indicar donde empieza el degradado (center top, top left, ...)
color origen: determina el color inicial (#BFBFFF)
color destino: determina el color final del degradado (#4D4DFF)