Generador de Degradados Cónicos

• Vista previa instantánea del degradado cónico: el generador actualiza la vista previa del gráfico circular y la barra de degradado en cada cambio, sin pulsar ningún botón. Ajusta cualquier parada de color, ángulo o posición y ve el resultado de inmediato.
• Vista previa interactiva de gráfico circular: el gráfico circular basado en Canvas muestra exactamente cómo se renderizará tu degradado cónico. Cada parada de color corresponde a un sector, con el ángulo inicial claramente indicado por una línea discontinua. Una barra de degradado lineal debajo ofrece una vista de referencia adicional.
• 100 % privado, sin subida de datos: toda la generación de degradados ocurre localmente en tu navegador. Tus valores de color nunca salen de tu dispositivo ni se envían a ningún servidor.
• Gratis y sin límites: genera degradados cónicos ilimitados sin registro, sin suscripción y sin límites de uso. Hasta 12 paradas de color por degradado. Totalmente gratis para siempre.

• Fondos CSS y elementos de interfaz: los desarrolladores frontend usan el generador de degradados cónicos para crear fondos CSS llamativos, bordes con degradado y spinners de carga. Los degradados cónicos son perfectos para elementos circulares de interfaz e indicadores de rueda de color.
• Visualización de datos y gráficos: los diseñadores de visualización de datos usan degradados cónicos como rellenos de gráficos de anillo, fondos de indicadores y indicadores de progreso circulares. La vista previa del gráfico circular facilita ver exactamente cómo se corresponde el degradado con datos circulares.
• Ruedas de color y herramientas de armonía: los diseñadores usan el generador para crear ruedas de color y visualizaciones de armonía cromática. La capacidad de fijar posiciones precisas de las paradas de color lo hace ideal para mostrar relaciones de color.
• Diseño de componentes de interfaz: los diseñadores de UI usan degradados cónicos para botones, tarjetas, avatares y fondos de insignias que necesitan un efecto de degradado circular. Los controles de posición del centro permiten colocar con precisión el origen del degradado.
• Diseño de marca y marketing: los diseñadores de marca usan degradados cónicos en secciones hero, tratamientos de logotipo y materiales de marketing para crear efectos visuales modernos y distintivos que destacan frente a los diseños con degradado lineal.
• Experimentación creativa: los profesionales creativos usan el generador para explorar nuevos efectos visuales y descubrir combinaciones de color inesperadas. La vista previa en tiempo real hace que experimentar sea rápido y divertido.

Un degradado cónico es un degradado CSS que transiciona colores alrededor de un punto central, rotando 360 grados, como una rueda de color o un gráfico circular. A diferencia de los degradados lineales (que van en línea recta) o los radiales (que irradian hacia fuera en círculos), los cónicos rodean un punto central, lo que los hace ideales para diseños circulares, ruedas de color y efectos de gráfico de anillo. La función CSS es conic-gradient() y forma parte del CSS Images Module Level 4.

1. Añade paradas de color: empieza con la paleta predeterminada de 5 colores o haz clic en un preajuste. Cada parada de color tiene un selector de color, una entrada hexadecimal y un deslizador de posición (0-100 %) que determina dónde aparece el color alrededor del círculo.
2. Ajusta ángulo y posición: el control de ángulo inicial rota todo el degradado (0-360°). Los controles de posición del centro (X/Y) desplazan el punto central del degradado: 50 %/50 % lo sitúa en el medio, mientras que 0 %/0 % lo sitúa en la esquina superior izquierda.
3. Previsualiza y copia: el gráfico circular de Canvas renderiza tu degradado en tiempo real con una línea discontinua que muestra el ángulo inicial. La salida CSS se actualiza automáticamente. Haz clic en «Copiar CSS» para copiar la declaración background completa.

• Los degradados lineales transicionan colores a lo largo de una línea recta (de arriba a abajo, de izquierda a derecha o en cualquier ángulo). Mejores para fondos, botones y cabeceras donde se desea una transición direccional.
• Los degradados radiales transicionan colores hacia fuera desde un punto central en círculos o elipses. Mejores para efectos de foco, botones brillantes y sombreados naturales.
• Los degradados cónicos transicionan colores alrededor de un punto central en un barrido circular. Mejores para ruedas de color, gráficos de anillo, spinners de carga, bordes con degradado en elementos circulares y cualquier diseño que necesite una transición circular de color.
• Cuándo elegir cónico: usa degradados cónicos cuando quieras que los colores rodeen un círculo, ya que no se pueden replicar con degradados lineales o radiales. Son especialmente eficaces para elementos de interfaz que sugieren rotación, progreso o comportamiento cíclico.

Los degradados cónicos CSS son compatibles con todos los navegadores modernos: Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. En navegadores antiguos, los degradados cónicos degradan elegantemente: el navegador mostrará el color de fondo de reserva. Define siempre un background-color de reserva antes de tu declaración de degradado.

Consejo de rendimiento: los degradados cónicos están acelerados por GPU y funcionan bien en la mayoría de casos. Sin embargo, evita animar degradados cónicos en elementos grandes o usarlos en elementos que se repintan con frecuencia (como fondos con desplazamiento), ya que el cálculo del degradado puede afectar a la tasa de fotogramas.