En CSS3, se han implementado propiedades para aplicar los efectos que deseas. Un ejemplo:
Código CSS:
Ver originalinput[type="button"]{
background: radial-gradient(ellipse, #fff, #f00);
}
Con la propiedad
radial-gradient, se genera una
imagen con los colores en degradé que se indiquen dentro de los paréntesis, los cuales tomarán la forma que se especifica en el primer parámetro. Ya que no todos los navegadores soportan esta propiedad, es necesario anteponer extensiones como
-ms,
-webkit o
-moz, según sea el caso. Así como puedes darle una forma
radial al degradé, también puedes darle una forma
lineal con
linear-gradient. Puedes leer más acerca de las nuevas propiedades de degradado de CSS en
esta página.
Te recomiendo pasar por
este artículo en el que puedes ver más ejemplos de degradado.
Saludos