# Degradado cónico CSS: ruedas, gráficos circulares y brillos

[Canonical HTML page](https://gradiently.design/es/guide/css-conic-gradient)

conic-gradient() barre el color alrededor de un punto como la aguja de un reloj. Esa idea dibuja ruedas de color, gráficos circulares y de anillo, brillos metálicos y estallidos.

## The short version

- Un degradado cónico CSS coloca los colores alrededor de un punto central, barriendo en el sentido de las agujas del reloj desde arriba, en lugar de a lo largo de una línea o hacia fuera en anillos.
- Los puntos de color de un degradado cónico usan ángulos o porcentajes de una vuelta completa, así que 25% y 90deg indican la misma posición.
- Los cortes duros convierten un degradado cónico en porciones, que es la forma más rápida de dibujar un gráfico circular en CSS.
- La palabra clave from gira el punto donde empieza el barrido, y at mueve el punto central.
- repeating-conic-gradient() repite sus puntos alrededor del círculo y, combinado con background-size, dibuja tableros de ajedrez y estallidos.

Un **degradado cónico CSS** barre el color alrededor de un punto central, igual que la aguja de un reloj recorre su esfera. Donde un degradado lineal cambia a lo largo de una línea y uno radial cambia hacia fuera desde el centro, `conic-gradient()` cambia con el ángulo. Empieza arriba, avanza en el sentido de las agujas del reloj y se usa en cualquier sitio donde CSS admita una imagen. Eso lo convierte en la herramienta natural para ruedas de color, gráficos circulares, anillos de carga y los reflejos angulares del metal cepillado.

Una rueda de color sencilla: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Siete puntos repartidos por igual en una vuelta completa. Repetir el primer color al final cierra la costura de arriba.

Si estás eligiendo entre tipos de degradado para un diseño y no aprendiendo la sintaxis, los [tipos de degradado](https://gradiently.design/es/guide/types-of-gradients) y la guía de diseño de [degradados cónicos](https://gradiently.design/es/guide/conic-gradient) son mejores puntos de partida.

## La sintaxis de conic-gradient()

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Todo lo que hay antes de la primera coma es opcional. Las dos listas de puntos de las dos últimas líneas dibujan la misma porción de un cuarto.

| Parte | Ejemplo | Valor por defecto |
| --- | --- | --- |
| Ángulo inicial | `from 45deg` | `from 0deg`, hacia arriba |
| Centro | `at 30% 50%`, `at top left` | `at center` |
| Interpolación | `in oklch`, `in hsl longer hue` | sRGB para colores hex |
| Posición del punto | `90deg`, `0.25turn`, `25%` | repartidos por igual en la vuelta |

Las partes de conic-gradient(). Las posiciones de los puntos se miden alrededor del círculo, no a lo largo de una línea.

Los ángulos avanzan en el sentido de las agujas del reloj desde arriba: `90deg` son las tres en punto, `180deg` las seis. La definición completa está en la [página de conic-gradient() de MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). La compatibilidad es universal desde hace años en las versiones actuales de Chrome, Edge, Safari y Firefox, así que no hacen falta prefijos.

## Girar y mover el barrido

`from` gira todo el degradado, útil cuando la costura entre el primer y el último color quedaría arriba. `at` mueve el centro. Llevarlo a una esquina convierte la rueda en un abanico de rayos, y sacarlo por completo de la caja da un suave velo inclinado que no se parece en nada a una rueda.

- from 0deg, centrado: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: costura abajo: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: abanico desde la esquina: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

La misma familia de índigo, violeta y rosa, girada y movida. En la versión de la esquina, un cuarto de vuelta llena la caja.

## Gráficos circulares y de anillo en CSS

Da a cada porción un inicio y un final, y deja que cada una empiece donde acabó la anterior. Escribir `0` como segunda posición de un punto es un atajo: una posición menor que la anterior se ajusta a ella, así que el color nuevo empieza justo donde acabó el último. Redondea el elemento con `border-radius: 50%` y recorta un agujero con una máscara radial para convertir el gráfico circular en uno de anillo.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Un gráfico circular de cuatro porciones y la línea que lo convierte en anillo. Usa propiedades personalizadas para los porcentajes si los datos cambian.

Porciones: 40, 25, 20 y 15%: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

El fondo del gráfico por sí solo. En un elemento redondo se lee como un gráfico.

> **Los gráficos también necesitan texto real** Un degradado es una imagen, así que los lectores de pantalla no pueden leer sus valores. Pon los números en texto o en una tabla junto al gráfico, o dale al elemento `role="img"` y un `aria-label` que los indique.

Los bordes duros de los degradados cónicos pueden verse algo dentados a lo largo de las líneas de las porciones en algunos navegadores. Si te molesta, deja una fracción de grado entre los puntos, como `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, para que el borde tenga un pelo de mezcla.

## Ruedas de color con interpolación de tono

Una rueda de color suele necesitar seis o siete puntos. Con los métodos de interpolación puedes pedir al navegador que recorra él mismo el círculo de tonos. `longer hue` toma el camino largo entre dos tonos, y cuando ambos puntos son el mismo color, el camino largo es el círculo entero, así que dos rojos dan un espectro completo.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Un color, dos veces, y un arcoíris completo entre medias. Los [degradados OKLCH](https://gradiently.design/es/guide/css-gradient-oklch) explican el tono más corto y el más largo.

## Brillo metálico y reflejos

El metal cepillado y los discos pulidos reales captan la luz en bandas angulares, que es justo lo que dibuja un degradado cónico. Alterna unos cuantos grises claros y oscuros, con espaciado desigual, y la superficie se lee como metal. En capas con poca opacidad sobre un color, el mismo truco añade brillo a botones y tarjetas; mira los [botones con degradado](https://gradiently.design/es/guide/css-gradient-button) para un ejemplo trabajado.

- Acero cepillado: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Disco dorado: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Bandas desiguales de claro y oscuro barridas alrededor del centro se leen como metal pulido.

## Degradados cónicos repetidos para patrones

`repeating-conic-gradient()` repite su lista de puntos alrededor de la vuelta. Los puntos cortos de bordes duros dan estallidos. Junto con `background-size`, un patrón de cuartos de dos colores se repite formando un tablero de ajedrez, un patrón que de otro modo es incómodo de dibujar con degradados. Más en los [patrones CSS](https://gradiently.design/es/guide/css-patterns).

- Sunburst: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Rayos nocturnos: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Puntos cortos y duros repetidos todo alrededor.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

Un tablero de ajedrez de 16 píxeles: la clásica cuadrícula de transparencia de los editores de imagen.

## FAQ

### ¿Qué es un degradado cónico en CSS?

Es un degradado cuyos colores cambian con el ángulo alrededor de un punto central, empezando arriba y avanzando en el sentido de las agujas del reloj, y se escribe con `conic-gradient()`.

### ¿Cómo hago un gráfico circular con CSS?

Usa cortes duros en un degradado cónico, como `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, en un elemento con `border-radius: 50%`. Pon también los valores en texto para los lectores de pantalla.

### ¿Cómo giro un degradado cónico?

Añade `from` y un ángulo como primer argumento, por ejemplo `conic-gradient(from 90deg, ...)`. El barrido empieza entonces a las tres en punto y no arriba.

### ¿Por qué los bordes de mi degradado cónico salen dentados?

Los cortes duros no tienen mezcla, y algunos navegadores dibujan el límite sin suavizar. Dejar una fracción de grado entre puntos vecinos lo suaviza.

### ¿Funcionan los degradados cónicos en todos los navegadores?

Sí, las versiones actuales de Chrome, Edge, Safari y Firefox admiten `conic-gradient()` y `repeating-conic-gradient()` sin prefijos.