50 - Gradientes radiales: colores deslumbrantes ✨

---

Gradientes Radiales

• 1. Gradientes Radiales
• 2. Detenciones de colores espaciados
• 3. Forma del degradado
• 4. Uso de palabras clave de tamaño
• 5. Repetir un degradado radial

---

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);

---

Ir al índice