Función CSS radial-gradient()

Página anterior Función pow() de CSS
Página siguiente Función ray() de CSS
Volver a la capa superior Manual de funciones CSS

Definición y uso

CSS radial-gradient() La función establece el gradiente radial como imagen de fondo.

El gradiente radial se define por su centro.

Para crear un gradiente radial, debe definir al menos dos colores.

Ejemplo de gradiente radial:

Ejemplo

Ejemplo 1

Distribución uniforme de colores en gradiente radial:

#grad {
  background-image: radial-gradient(red, green, blue);
}

Prueba tu mismo

Ejemplo 2

Distribución de colores en gradiente radial diferente:

#grad {
  background-image: radial-gradient(red 5%, green 15%, blue 60%);
}

Prueba tu mismo

Ejemplo 3

Gradiente radial de forma circular:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Prueba tu mismo

Ejemplo 4

Uso de palabras clave de diferentes tamaños para el gradiente radial:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, blue, green, yellow, black);
}
#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, blue, green, yellow, black);
}

Prueba tu mismo

Sintaxis CSS

radial-gradient(shape size at position, start-color, ... , last-color);

Valor	Descripción
shape	Define la forma del gradiente. Los valores posibles son: ellipse (por defecto) circle
size	Define el tamaño del gradiente. Los valores posibles son: farthest-corner (por defecto) closest-side closest-corner farthest-side
position	Define la ubicación del gradiente. El valor predeterminado es "center".
start-color, ... , last-color	Los puntos de color son los colores que desea que se presenten con una transición suave entre ellos. Este valor se compone de un valor de color, seguido de una o dos ubicaciones opcionales de los puntos de color (porcentaje entre 0% y 100% o longitud a lo largo del eje de la gradiente).