Guía visual de Conic Gradient CSS

Un gradiente cónico en CSS gira los colores alrededor de un punto central como la manecilla de un reloj que barre la esfera, en lugar de mezclarse en línea recta o irradiar hacia afuera en anillos. Esa única diferencia permite que conic-gradient() construya ruedas de color, gráficos circulares, anillos de progreso y patrones angulares nítidos que los gradientes lineales y radiales simplemente no pueden producir. Esta guía te da primero el modelo mental, luego recetas prácticas con código listo para copiar y pegar.

Si solo has usado linear-gradient(), la versión cónica se siente extraña al principio. El truco es dejar de pensar en distancia y empezar a pensar en ángulo. Una vez que eso encaja, se abre toda una categoría de efectos sin imágenes, sin SVG y sin JavaScript.

Lo que realmente hace un gradiente cónico#

conic-gradient() coloca paradas de color alrededor de un punto central por ángulo, girando en sentido horario desde una dirección inicial. Imagina un pastel siendo cortado: cada parada de color es un corte, y la porción entre dos cortes se rellena con una mezcla (o un borde duro si las paradas se tocan). Los colores giran alrededor del centro en lugar de alejarse de él.

Esa es la diferencia clave que los principiantes pasan por alto. Un gradiente radial irradia: los colores cambian a medida que te alejas del centro. Un gradiente cónico rota: los colores cambian a medida que barres alrededor del centro. Mismo punto central, movimiento completamente diferente.

Tipo de gradiente	Los colores cambian por	Uso típico
linear-gradient()	Distancia a lo largo de una línea	Fondos, botones, fundidos
radial-gradient()	Distancia desde el centro (anillos)	Focos, orbes suaves, viñetas
conic-gradient()	Ángulo alrededor del centro (barrido)	Ruedas de color, gráficos circulares, anillos de progreso

Modelo mental para recordar: lineal se mueve, radial irradia, cónico gira. Si tu efecto necesita algo que parezca un reloj, una rueda o una porción de pastel, quieres cónico.

La sintaxis básica#

La forma mínima toma una lista de paradas de color, como otros gradientes:

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

Eso barre a través de los colores comenzando desde arriba (las 12 en punto) y girando en sentido horario de vuelta al inicio. Repetir el primer color (red) al final cierra el bucle para que no haya una costura dura donde el barrido se envuelva.

Casi siempre también estableces un punto central, porque por defecto llena todo el elemento y el origen del barrido se sitúa justo en el centro. Ajustaremos ambos a continuación.

Cómo crear un gradiente cónico paso a paso#

Aquí tienes el orden práctico de construcción. Sigue estos pasos y podrás producir cualquier efecto cónico, desde una rueda de colores suave hasta un gráfico de sectores segmentado.

Paso 1: Establecer el ángulo inicial con from#

Por defecto, el barrido comienza apuntando hacia arriba (hacia las 12 en punto). La palabra clave from rota ese origen. Úsala cuando quieras que un color comience en una posición específica del reloj.

/* El barrido comienza apuntando hacia la derecha (3 en punto) en lugar de arriba */
background: conic-gradient(from 90deg, red, blue, red);

Los ángulos aumentan en sentido horario. 0deg es arriba, 90deg es derecha, 180deg es abajo, 270deg es izquierda. Si una rueda parece girada incorrectamente, ajusta from en lugar de reordenar cada parada de color.

Paso 2: Mover el centro con at#

El origen del barrido por defecto es el centro del elemento (50% 50%). La palabra clave at lo reposiciona, exactamente como radial-gradient. Esto es importante para efectos descentrados y para cortar solo una parte de un elemento.

/* Origen en la esquina superior izquierda */
background: conic-gradient(from 0deg at 25% 25%, orange, purple, orange);

Puedes combinar from y at en una sola expresión: conic-gradient(from 45deg at 30% 70%, ...). El orden importa: from va antes de at.

Paso 3: Colocar paradas de color en grados exactos#

Aquí es donde los gradientes cónicos se vuelven potentes. En lugar de dejar que los colores se mezclen uniformemente, asigna a cada parada un ángulo para controlar exactamente dónde se sitúa. Los ángulos van de 0deg a 360deg alrededor del círculo.

background: conic-gradient(
  red 0deg,
  red 120deg,
  green 120deg,
  green 240deg,
  blue 240deg,
  blue 360deg
);

Observa cómo cada color se declara dos veces en el mismo par de ángulos. red llena de 0deg a 120deg, luego green toma el relevo en la misma marca de 120deg. Ese límite compartido es el secreto para el siguiente paso.

Paso 4: Crear bordes duros para sectores y gráficos circulares#

Cuando dos paradas de color comparten el mismo ángulo, el gradiente no tiene dónde mezclarse, por lo que obtienes una línea nítida en lugar de un degradado. Así es como conviertes un barrido suave en cuñas limpias. El código del Paso 3 ya hace esto: tres sectores iguales de 120 grados con bordes duros entre ellos.

Para hacer un gráfico circular, establece el ángulo de cada parada según su parte de 360 grados. Un sector del 25% termina en 90deg, un sector del 50% termina en 180deg, y así sucesivamente.

/* Gráfico circular: 50% azul, 30% verde azulado, 20% ámbar */
background: conic-gradient(
  #2563eb 0deg 180deg,   /* 50% */
  #14b8a6 180deg 288deg, /* 30% */
  #f59e0b 288deg 360deg  /* 20% */
);
border-radius: 50%; /* recorta el cuadrado en un círculo */

La abreviatura color startAngle endAngle es más limpia que repetir el color, y los navegadores modernos la soportan. Añade border-radius: 50% para recortar la caja cuadrada en un círculo real.

Paso 5: Hacer una rueda de colores suave#

Para una rueda de colores completa, barre el espectro de tonos usando HSL y deja que los colores se mezclen sin paradas duras. Esta es la pieza clásica de los gradientes cónicos.

.wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 90% 55%),
    hsl(60 90% 55%),
    hsl(120 90% 55%),
    hsl(180 90% 55%),
    hsl(240 90% 55%),
    hsl(300 90% 55%),
    hsl(360 90% 55%)
  );
}

Repetir hsl(0 ...) como hsl(360 ...) cierra el bucle sin problemas porque el tono 0 y el tono 360 son el mismo rojo. Ajusta la saturación y la luminosidad para cambiar toda la rueda a pastel o vívida.

Obtener estos ángulos correctamente a mano es complicado, especialmente para ruedas de múltiples paradas y gráficos desiguales. En lugar de contar grados mentalmente, constrúyelo visualmente con nuestro generador de gradientes CSS gratuito, arrastra las paradas hasta que se vea bien y copia el CSS listo para producción directamente.

Gradientes y patrones cónicos repetidos#

Agrega el prefijo repeating- y el barrido se repite alrededor del círculo tantas veces como lo permita el ángulo. Así se obtienen ráfagas solares, barridos de radar y fondos de estallido estelar con una sola declaración corta.

/* Estallido estelar de 12 radios */
background: repeating-conic-gradient(
  #111 0deg 15deg,
  #fff 15deg 30deg
);

Cada segmento de 30 grados (15 negro, 15 blanco) se repite doce veces para llenar los 360 grados completos. Cambia el ancho del segmento para agregar o quitar radios.

El truco del tablero de ajedrez#

Uno de los patrones cónicos más útiles es el tablero de ajedrez, ese que ves detrás de las imágenes transparentes en los editores. Proviene de un solo gradiente cónico repetido como un pequeño mosaico de fondo.

.checker {
  background: conic-gradient(
    #ccc 0deg 90deg,
    #fff 90deg 180deg,
    #ccc 180deg 270deg,
    #fff 270deg 360deg
  );
  background-size: 24px 24px;
}

Los cuatro cuadrantes alternan gris y blanco, y background-size reduce el gradiente a un mosaico repetitivo. Es mucho más ligero que un PNG y escala infinitamente. Si necesitas una versión rasterizada de un patrón para un cliente de correo antiguo o una aplicación heredada, siempre puedes renderizar el CSS a una imagen, y nuestro convertidor de SVG a PNG maneja ese tipo de exportación limpiamente.

Creación de anillos de progreso#

Un gradiente cónico más una máscara circular crea un indicador de progreso tipo dona sin JavaScript para lo visual.

.progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0deg 252deg, #e5e7eb 252deg 360deg);
}

Aquí 252deg es el 70% de 360, por lo que el arco verde muestra un progreso del 70%. Actualiza ese único ángulo con una variable CSS y el anillo se llena en vivo. Haz un agujero en el medio con un círculo más pequeño posicionado absolutamente y tendrás un medidor de anillo limpio.

Compatibilidad del navegador y detalles prácticos#

conic-gradient() es compatible con todos los navegadores modernos principales (Chrome, Edge, Firefox, Safari) desde aproximadamente 2020, por lo que para el público actual puedes usarlo sin necesidad de un fallback. Los casos que vale la pena planificar son los navegadores empresariales antiguos y los clientes de correo electrónico, donde la compatibilidad con degradados es irregular en general.

Algunas cosas que suelen causar problemas:

• Rellena la caja, no un círculo. Un degradado cónico en un elemento cuadrado permanece cuadrado hasta que agregas border-radius: 50%. El barrido es circular, el área pintada no.
• Los bordes duros necesitan ángulos coincidentes. Una línea borrosa tenue entre sectores significa que tus dos paradas están separadas por una fracción de grado. Hazlas idénticas, como red 120deg, green 120deg.
• Ángulos, no porcentajes, para la posición. Las paradas cónicas usan deg (o turn y rad). Mezclar con % funciona en motores más nuevos, pero deg es la opción clara y portátil.
• Las unidades turn son ordenadas. 0.5turn equivale a 180deg. Para cálculos de gráficos circulares, turn puede leerse de forma más natural: un cuarto de sector es 0.25turn.

Advertencia: no confíes en un degradado cónico como la única forma de transmitir datos en un gráfico. Acompaña el círculo o anillo con una etiqueta de texto o leyenda para que la información sobreviva para los usuarios de lectores de pantalla y los modos de alto contraste.

Para técnicas de fondo más amplias más allá del caso cónico, nuestro tutorial sobre cómo crear fondos modernos con degradados CSS cubre la superposición de degradados lineales y radiales para dar profundidad, lo que combina bien con los efectos angulares aquí.

Poniendo a trabajar el gradiente cónico en CSS#

El gradiente cónico en CSS es justo lo que necesitas cuando algo gira alrededor de un centro: una rueda de colores para un selector, un gráfico circular o de dona sin librerías, un anillo de progreso, un efecto de sol o un patrón de tablero de ajedrez. El cambio mental es pequeño pero decisivo. Deja de pensar en distancia, empieza a pensar en ángulo, y la sintaxis fluye naturalmente.

Empieza con una lista de colores en bucle cerrado para sentir la mecánica, luego pasa a paradas fijas por ángulo para bordes duros y a repeating-conic-gradient para patrones. Cuando el cálculo de grados se vuelva tedioso, sáltate la aritmética: abre el generador visual de gradientes CSS, crea el efecto a ojo y copia el CSS limpio en tu hoja de estilos.

Preguntas Frecuentes#

¿Cuál es la diferencia entre conic-gradient y radial-gradient en CSS? Un gradiente radial cambia de color según la distancia desde el centro, creando anillos concéntricos o un efecto de foco. Un gradiente cónico cambia de color según el ángulo alrededor del centro, girando en sentido horario como la manecilla de un reloj. El radial se irradia hacia afuera; el cónico gira alrededor.

¿Cómo hago un gráfico circular con conic-gradient en CSS? Asigna a cada porción un color con un ángulo de inicio y fin que coincida con su parte de 360 grados, usando ángulos iguales para bordes duros. Por ejemplo, una porción del 25% abarca 0deg 90deg. Añade border-radius: 50% para recortar el elemento cuadrado en un círculo. Un generador visual elimina la necesidad de hacer cálculos de ángulos.

¿Por qué mi gradiente cónico se ve cuadrado en lugar de redondo? Un gradiente cónico pinta todo el cuadro del elemento, que por defecto es rectangular. El barrido es circular, pero el área pintada no se recorta automáticamente en un círculo. Añade border-radius: 50% al elemento para que las esquinas cuadradas se recorten y veas un círculo limpio.

¿Cómo roto el punto de inicio de un gradiente cónico? Usa la palabra clave from con un ángulo, como conic-gradient(from 90deg, ...). Los ángulos aumentan en sentido horario, donde 0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda. Ajustar from rota todo el barrido sin reordenar tus paradas de color.

¿Es compatible conic-gradient en todos los navegadores? Sí, todos los principales navegadores modernos (Chrome, Edge, Firefox y Safari) soportan conic-gradient() desde alrededor de 2020, por lo que las audiencias modernas no necesitan un fallback. Las excepciones son navegadores muy antiguos y muchos clientes de correo electrónico, donde el soporte de gradientes no es confiable en general, así que proporciona un color de fondo sólido como fallback.

¿Cómo creo un patrón repetitivo como un tablero de ajedrez o un sol? Usa repeating-conic-gradient() con paradas basadas en ángulos, luego establece background-size para controlar el mosaico. Un sol alterna dos colores en segmentos de pocos grados, y un tablero de ajedrez usa cuatro paradas de cuadrantes reducidas a un tamaño de mosaico pequeño. Ambos se renderizan infinitamente escalables sin archivos de imagen.