Gradientes radiales CSS
Gradientes radiales CSS
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%);
}
Establecer forma
El parámetro de forma define la forma. Puede tomar el valor círculo o elipse. El valor predeterminado es elipse.
El siguiente ejemplo muestra un degradado radial con la forma de un círculo:
Ejemplo
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Uso de palabras clave de diferentes tamaños
El parámetro de tamaño define el tamaño del degradado. Puede tomar cuatro valores:
- lado más cercano
- lado más lejano
- esquina más cercana
- esquina más lejana
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);
}
Repetición de un gradiente radial
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%);
}