Saltar al contenido
arnaud.app

Generador de degradado cónico

Generador de degradado cónico gratuito con vista previa en vivo. Gira los colores alrededor de un centro para ruedas de color, gráficos circulares y spinners - copia el CSS conic-gradient.

Funciona en tu navegador

Un degradado cónico gira sus colores alrededor de un centro, como la aguja de un reloj. Ajusta el ángulo inicial y el centro, edita las paradas en la barra y la herramienta escribe el CSS `conic-gradient()` en vivo. Es el CSS tras las ruedas de color, los gráficos circulares en CSS puro, los anillos de progreso y los spinners.

background: conic-gradient(from 135deg, #0a7cff 0%, #a855f7 100%);

Cómo usarla

  1. Elige un tipo o preajuste

    Lineal, radial o cónico (o una variante repetida), o carga un preajuste para partir de un buen acabado.

  2. Da forma al degradado

    Arrastra el ángulo, ajusta la forma y posición radiales, y edita las paradas en la barra - clic para añadir, arrastra un punto para mover.

  3. Afina el color

    Ajusta la opacidad de cada parada y activa OKLCH para mezclas más suaves y vivas entre colores saturados.

  4. Copia o comparte

    Copia el CSS `background` listo para usar, o usa Copiar enlace para compartir el degradado exacto.

¿Qué es?

Un degradado CSS es una mezcla suave e independiente de la resolución entre dos o más colores, dibujada por el navegador sin archivo de imagen. Este generador construye la función completa `linear-gradient()`, `radial-gradient()` o `conic-gradient()` (y sus variantes repetidas) a partir de una lista de paradas - cada una con color, posición y opacidad. Al ser CSS puro, un degradado se adapta a cualquier tamaño, casi no cuesta renderizar y nunca se pixela.

Cuándo usarla

Usa un degradado cuando quieras profundidad sin el peso de una imagen: fondos de hero y secciones, brillos de botones y tarjetas, superposiciones tipo cristal, acentos de marca, superficies en modo oscuro o un fundido de una foto al color de la página. Los degradados cónicos sirven de gráficos circulares, ruedas de color y spinners; los repetidos crean rayas, cuadrículas y patrones.

Errores comunes

Amontonar paradas recarga el degradado - dos o tres suelen bastar. Mezclar complementarios saturados (rojo a verde) en sRGB da un centro turbio; añade un punto neutro o activa OKLCH. No olvides un `background-color` de respaldo para el raro navegador que no entienda tu sintaxis, y recuerda que los degradados muy sutiles pueden desaparecer en pantallas de baja calidad.

Preguntas frecuentes

¿Qué diferencia hay entre degradado lineal, radial y cónico?
Un degradado lineal mezcla los colores a lo largo de una línea recta, según un ángulo. Un degradado radial irradia desde un centro, en círculo o elipse. Un degradado cónico gira los colores alrededor de un punto, como la aguja de un reloj - ideal para ruedas de color y gráficos circulares. Esta herramienta genera los tres, más sus variantes repetidas.
¿Por qué mi degradado se ve con bandas o turbio en el centro?
Por defecto CSS mezcla los colores en sRGB, lo que puede dar un centro oscuro y turbio entre dos colores saturados. Activa OKLCH y la herramienta emite `linear-gradient(in oklch, ...)`, que mezcla en un espacio perceptualmente uniforme para transiciones más suaves y vivas en navegadores modernos.
¿Puedo añadir transparencia?
Sí. Cada parada tiene un control de opacidad; por debajo del 100 % la herramienta la expresa como color `rgba()`. Desvanecer un degradado a transparente es el truco tras las superposiciones de imagen, los fundidos « leer más » y los separadores suaves.
¿Cuántas paradas de color puedo usar?
Las que quieras - haz clic en la barra o en « Añadir parada » y arrastra los puntos para recolocarlos. Dos o tres paradas suelen quedar mejor; demasiadas y muy juntas hacen que el degradado parezca recargado.
¿Qué controla el ángulo?
En los degradados lineales, el ángulo marca la dirección de la mezcla: 0° hacia arriba, 90° a la derecha, 180° hacia abajo. En los cónicos, marca dónde empieza el giro. Los radiales no tienen ángulo - controlas la forma y la posición del centro.
¿Cómo hago rayas o un borde duro en lugar de una mezcla suave?
Da la misma posición a dos paradas (ambas al 50 %, por ejemplo) y el color cambia de golpe, sin mezcla: es una parada dura. Usa un degradado lineal repetido con paradas muy juntas para crear rayas, cuadros o un patrón de barbería.
¿Puedo usar la salida con Tailwind o como background-image?
La herramienta produce un valor `background:` estándar. Úsalo tal cual, o pásalo a `background-image` cuando quieras también un `background-color` de respaldo. En Tailwind, métela en un valor arbitrario como `bg-[linear-gradient(...)]`.

Generador de degradados CSS

Degradados CSS lineales, radiales y cónicos con vista previa en vivo, preajustes y copia en un clic.

Probar →

Más en esta categoría