1. Gradientes Radiales
Un degradado radial crea una transición de color desde un punto central,
expandiéndose hacia afuera. Por defecto, tiene una forma elíptica y va del centro
a los bordes. Se define con la función
radial-gradient(), especificando al menos dos colores.
background-image: radial-gradient(white, black);2. Detenciones de colores espaciados
Al igual que los degradados lineales, puedes controlar dónde comienza y termina la transición de cada color usando porcentajes o píxeles. Esto crea transiciones más abruptas o efectos de anillo.
background-image: radial-gradient(red 5%, yellow 15%, #39a039 60%);3. Forma del degradado
Puedes especificar la forma del degradado usando las palabras clave
circle (círculo) o ellipse (elipse). Por
defecto, la forma es una elipse. Para un círculo perfecto, debes
especificar explícitamente la forma.
background-image: radial-gradient(circle, red, yellow, green);4. Uso de palabras clave de tamaño
Puedes controlar el tamaño del degradado con palabras clave como
closest-corner, farthest-corner, closest-side, o farthest-side. Estas definen el
tamaño del círculo o la elipse en relación con la caja del elemento.
background-image: radial-gradient(circle farthest-corner at 80% 80%, white, black);5. Repetir un degradado radial
La función repeating-radial-gradient() crea un patrón que
se repite desde el centro del elemento. Esto es útil para crear efectos
de anillos concéntricos o texturas.
background-image: repeating-radial-gradient(red, red 10px, yellow 10px, yellow 20px);
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias