Gradientes radiales simples

Así como hay gradientes lineales, también las hay de tipo radial donde el degradado se genera de modo circular.

Si nos limitamos a lo simple, la sintaxis de ambas no difiere demasiado, por ejemplo:

.gradiente-lineal {
  background: -moz-linear-gradient(#FFF, #000);
  background: -webkit-linear-gradient(#FFF, #000);
  background: -o-linear-gradient(#FFF, #000);
  background: -ms-linear-gradient(#FFF, #000);
}

.gradiente-radial {
  background: -moz-radial-gradient(#FFF, #000);
  background: -webkit-radial-gradient(#FFF, #000);
  background: -o-radial-gradient(#FFF, #000);
  background: -ms-radial-gradient(#FFF, #000);
}

Aunque en todos los casos debemos usar el prefijo necesario para que los distintos navegadores reconozcan la propiedad, en un esquema elemental, basta cambiar linear-gradient por radial-gradient indicando los colores inicial (comenzará el el centro ) y final.

Si queremos personalizarlas aún más, la sintaxis tampoco varía:

radial-gradient( posición, color-inicial, color-final )

donde la posición indica dónde comenzará la gradiente (top, right, bottom, left, center):

radial-gradient(center top, #FFF, #000); o radial-gradient(top, #FFF, #000);
radial-gradient(center bottom, #FFF, #000); o radial-gradient(bottom, #FFF, #000);
radial-gradient(left center, #FFF, #000); o radial-gradient(left , #FFF, #000);
radial-gradient(right center, #FFF, #000); o radial-gradient(right, #FFF, #000);

Claro que esto se complica un poco más ya que este tipo de gradientes posee otro parámetro opcional que podemos utilizar y que consta de dos palabras:

radial-gradient( posicion, shape size, color-inicial, color-final )

shape es "la forma" que adoptará y puede ser circle o ellipse
size indica la forma en que se expandirá y terminará y puede ser closest-side (o contain), closest-corner, farthest-side, farthest-corner (o cover)

radial-gradient(circle closest-side, #FFF, #000)

y todo puede combinarse:

radial-gradient(left top,circle closest-side, #FFF, #000)

Al igual que la lineales, si queremos usar varios colores, los vamos agregando uno tras otro, separados por comas:

radial-gradient(#FFF, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #000)
radial-gradient(#FFF, #F00, #FF0, #0F0, #000)