CSS: Fondos con degradado radial

Los fondos con degradado radial de color son un recurso muy utilizado en los diseños web o móviles, dependiendo de la evolución de las tendencias son más o menos utilizados.

Tradicionalmente se utilizaban imágenes creadas en un editor gráfico, pero gracias a la evolución del CSS es posible crear estos fondos directamente desde el navegador.

La propiedad de CSS que se utiliza para estos fondos es radial-gradient, se utiliza dentro de background o dentro de background-image.

Radial-gradient tiene las siguientes propiedades:

• shape: determina la forma, puede ser un circle o un ellipse.
• size: determina el tamaño del gradiente, tiene los siguientes valores que determinan donde finaliza el gradiente:
• closest-side
• farthest-side
• closest-corner
• farthest-corder
• lenght
• position: marca la posición:
• top
• right
• left
• center
• color-stop: son los valores que definen el gradiente.

Os pongo un ejemplo de un degradado radial básico.

See the Pen pYMbvJ by Gabriel Cuesta Arza (@gabicuesta) on CodePen. 

Para hacer degradados más complejos sólo tenemos que aplicar los parámetros correspondientes.

See the Pen CSS gradient by Gabriel Cuesta Arza (@gabicuesta) on CodePen.

Espero que os sea de utilidad.