Gradientes radiales
Un gradiente radial se define por su centro.
Para crear un degradado radial, también debe definir al menos dos paradas de color.
Sintaxis
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
De forma predeterminada, la forma es elipse, el tamaño es la esquina más alejada y la posición es el centro.
Gradiente radial - Paradas de color uniformemente espaciadas (esto es predeterminado)
El siguiente ejemplo muestra un degradado radial con paradas de color uniformemente espaciadas:
Ejemplo:
#grad {
background-image: radial-gradient(red, yellow, green);
}
Degradado radial - paradas de color separadas de forma diferente
El siguiente ejemplo muestra un degradado radial con paradas de color separadas de forma diferente:
Ejemplo:
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Establece una forma
El parámetro shape define la forma. Puede tomar el valor circle o ellipse. El valor predeterminado es elipse.
Ejemplo:
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Uso de diferentes tamaños
El parámetro size define el tamaño del degradado. Puede tomar cuatro valores:
closest-sidefarthest-sideclosest-cornerfarthest-corner
Ejemplo:
Un degradado radial con palabras clave de diferentes tamaños:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
Repitiendo radial-gradient
La función repeating-radial-gradient() se usa para repetir gradientes radiales:
Ejemplo:
Un gradiente radial repetitivo:
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
Resumen
Este documento describe cómo crear gradientes radiales en CSS, incluyendo la sintaxis, paradas de color uniformemente espaciadas o separadas, formas (elipse o círculo), diferentes tamaños (closest-side, farthest-side, closest-corner, farthest-corner) y repeticiones.
Traducido con 💚 desde W3Schools.com