Generador de gradiente cónico CSS Crea gradientes cónicos CSS para gráficas de pastel, ruedas de colores y efectos de barrido.
Generador de gradiente cónico
Crea gradientes cónicos CSS para gráficas de pastel, ruedas de colores y efectos de barrido.
Establecer colores
Elige tres colores para el barrido cónico.
Ajustar configuración
Establece el ángulo de inicio y la posición del centro.
Copiar CSS
Copia el código CSS generado para el gradiente cónico.
What Is Generador de gradiente cónico?
Un generador de gradientes cónicos crea gradientes CSS que giran alrededor de un punto central, transicionando entre colores angularmente en lugar de lineal o radialmente. Los gradientes cónicos rotan alrededor de un punto central, lo que los hace perfectos para crear ruedas de color, segmentos similares a gráficas de pie, caras de reloj y transiciones de color suaves. Esta herramienta te permite elegir tres colores, establecer el ángulo inicial y posicionar el punto central. El código CSS resultante con la función conic-gradient() crea transiciones angulares suaves que se conectan al color inicial. Los gradientes cónicos son una poderosa característica de CSS que permite efectos visuales que de otro modo requerirían SVG o Canvas, manteniendo tus diseños puros en CSS y acelerados por GPU.
Why Use Generador de gradiente cónico?
-
Crea transiciones de color angulares imposibles con gradientes lineales o radiales
-
Ángulo de inicio ajustable para controlar la rotación
-
Posición del centro personalizable para efectos descentrados
-
Ideal para fondos decorativos y visualizaciones de datos
-
Salida de CSS limpia para uso en producción
Common Use Cases
Ruedas de colores
Crea fondos de rueda de colores arcoíris utilizando gradientes cónicos.
Gráficas de pie
Construye gráficas de pie simples solo con CSS y paradas de color duras.
Fondos decorativos
Crea fondos de gradiente angular únicos para secciones y tarjetas.
Indicadores de carga
Diseña indicadores de carga solo con CSS utilizando arcos de gradientes cónicos.
Technical Guide
La función conic-gradient() de CSS crea transiciones de color alrededor de un punto central. La sintaxis es: conic-gradient(desde ángulo en posX posY, color1, color2, ..., color1). El ángulo "desde" rota la posición inicial (por defecto 0deg = parte superior). Los colores se distribuyen uniformemente alrededor de la circunferencia de 360° a menos que se especifiquen paradas de ángulo explícitas. Repetir el primer color como la última parada crea un bucle sin costuras. Para efectos de gráficas de pie, usa paradas porcentuales: conic-gradient(rojo 0% 25%, azul 25% 50%, verde 50% 75%, amarillo 75%). Los gradientes cónicos están soportados en Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. Pueden ser enmascarados con border-radius: 50% y combinados con mask-image para formas complejas.
Tips & Best Practices
-
1Repite el primer color como la última parada para transiciones circulares sin problemas
-
2Utiliza paradas duras (mismo porcentaje, dos colores) para segmentos de gráficas de pie
-
3Combina con border-radius: 50% para efectos de rueda de colores circular
-
4El ángulo 'from' gira todo el gradiente - útil para efectos animados
-
5Capas múltiples de gradientes cónicos para patrones complejos
Related Tools
Selector de colores
Selector de colores interactivo con salidas HEX, RGB, HSL y CMYK.
🎨 Color Tools
Rueda de Armonía de Colores
Rueda de colores interactiva con cinco tipos de armonía y selección visual.
🎨 Color Tools
Generador de Degradados Lineales
Crea degredados lineales CSS con colores personalizados, ángulo y paradas de color.
🎨 Color Tools
Generador de Degradados Radiales
Crea degradados radiales CSS con forma, posición y colores personalizados.
🎨 Color Tools
Generador de filtros CSS
Aplica efectos de filtro CSS como desenfoque, brillo, contraste y más con controles visuales.
🎨 CSS & DesignFrequently Asked Questions
Q ¿Qué es un gradiente cónico?
Q ¿Puedo crear gráficas de pie con gradientes cónicos?
Q ¿Está bien soportado el gradiente cónico?
About This Tool
Generador de gradiente cónico is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.