Skip to main content

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 illustration
🎨

Generador de gradiente cónico

Crea gradientes cónicos CSS para gráficas de pastel, ruedas de colores y efectos de barrido.

1

Establecer colores

Elige tres colores para el barrido cónico.

2

Ajustar configuración

Establece el ángulo de inicio y la posición del centro.

3

Copiar CSS

Copia el código CSS generado para el gradiente cónico.

Loading tool...

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

  • 1
    Repite el primer color como la última parada para transiciones circulares sin problemas
  • 2
    Utiliza paradas duras (mismo porcentaje, dos colores) para segmentos de gráficas de pie
  • 3
    Combina con border-radius: 50% para efectos de rueda de colores circular
  • 4
    El ángulo 'from' gira todo el gradiente - útil para efectos animados
  • 5
    Capas múltiples de gradientes cónicos para patrones complejos

Related Tools

Frequently Asked Questions

Q ¿Qué es un gradiente cónico?
Un gradiente cónico transita entre colores alrededor de un punto central, barrido angularmente como una manecilla de reloj. Difiere de los gradientes lineales (línea recta) y radiales (hacia afuera desde el centro).
Q ¿Puedo crear gráficas de pie con gradientes cónicos?
¡Sí! Utiliza paradas de color duras (dos colores al mismo porcentaje) para crear segmentos nítidos. Por ejemplo: conic-gradient(rojo 0% 30%, azul 30% 70%, verde 70%).
Q ¿Está bien soportado el gradiente cónico?
Está soportado en todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge. Es una característica de CSS Images Level 4 con una adopción amplia desde 2020.

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.