51 - Gradientes Cónicos: Un Nuevo Giro en el Diseño Web 🌀

---

51 - Gradientes Cónicos: sus colores cónicos ✨

Los gradientes cónicos son una poderosa función de CSS que te permite crear degradados de color que giran alrededor de un punto central, en lugar de una línea recta o un círculo. Esto es ideal para crear gráficos circulares, efectos de rueda de color y otros patrones únicos.

Temas de la lección

• 1. Conic Gradients
• 2. Tres Colores
• 3. Cinco Colores
• 4. Tres Colores y Grados
• 5. Crear gráficos circulares
• 6. Conic Gradient con ángulo especificado
• 7. Conic Gradient con posición de centro especificada
• 8. Repetir un gradiente cónico

---

1. Conic Gradients

Un gradiente cónico crea una transición de color que gira alrededor del centro de un elemento. Se define con la función conic-gradient(), especificando al menos dos colores.

background-image: conic-gradient(red, yellow, green);

---

2. Conic Gradient: Tres Colores

Al igual que otros gradientes, puedes especificar múltiples colores para crear transiciones más ricas. El degradado se distribuirá uniformemente entre los colores.

background-image: conic-gradient(red, yellow, blue);

---

3. Conic Gradient: Cinco Colores

El número de colores no está limitado. Cuantos más colores agregues, más suave será la transición alrededor del círculo.

background-image: conic-gradient(red, orange, yellow, green, blue);

---

4. Conic Gradient: Tres Colores y Grados

Puedes especificar la posición de las paradas de color (color stops) usando grados (deg) para un control preciso sobre la transición.

background-image: conic-gradient(red 45deg, yellow 90deg, blue 180deg);

---

5. Crear gráficos circulares

El control por grados hace que los gradientes cónicos sean perfectos para crear gráficos circulares (pie charts) sin necesidad de imágenes.

background-image: conic-gradient(
  red 0deg 90deg,
  blue 90deg 180deg,
  yellow 180deg 360deg
);

---

6. Conic Gradient con ángulo especificado

Puedes cambiar el punto de inicio del gradiente con la palabra clave from. Por defecto, el gradiente comienza en la parte superior (0deg).

background-image: conic-gradient(from 90deg, red, blue);

---

7. Conic Gradient con posición de centro especificado

También puedes mover el centro del gradiente usando la palabra clave at, especificando coordenadas (x y) en porcentajes o píxeles.

background-image: conic-gradient(at 20% 80%, red, blue, green);

---

8. Repetir un gradiente cónico

La función repeating-conic-gradient() es ideal para crear patrones que se repiten en un círculo, como ruedas de colores, espirales o patrones de ajedrez.

background-image: repeating-conic-gradient(
  red 0deg 10deg,
  blue 10deg 20deg
);

---

Funciones de Gradiente CSS

Función	Descripción
linear-gradient()	Crea un degradado de color que se mueve en línea recta.
radial-gradient()	Crea un degradado que se expande desde un punto central.
conic-gradient()	Crea un degradado que gira alrededor de un punto central.
repeating-linear-gradient()	Repite un patrón de degradado lineal.
repeating-radial-gradient()	Repite un patrón de degradado radial.
repeating-conic-gradient()	Repite un patrón de degradado cónico.

---

Ir al índice