⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Generador de gradiente cónico CSS

Cree degradados CSS visualmente: tipo lineal, radial o cónico, control deslizante de ángulo y hasta seis paradas de color con una vista previa en vivo de ancho completo y código copiable.

90°
Procesando... 0%

Resultado

Esta página abre el generador de degradado con el tipo cónico ya seleccionado: en lugar de desvanecerse a lo largo de una línea o desde el centro, los colores se desplazan alrededor del centro como la manecilla de un reloj, comenzando desde el ángulo que estableció en el control deslizante.

conic-gradient() es la más nueva de las tres funciones de gradiente de CSS y la que está detrás de los gráficos circulares, las ruedas de color y los llamativos efectos de borde giratorio. Las posiciones de parada en porcentaje son posiciones alrededor del círculo: dos paradas en 0% y 100% se mezclan suavemente en todos los sentidos, mientras que las paradas colocadas muy juntas crean cuñas nítidas.

Ajuste el ángulo de inicio y se detiene hasta que la vista previa se vea bien, luego copie la línea de fondo. Todos los navegadores modernos admiten gradientes cónicos, por lo que es seguro enviar el código.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Selección de tipo de degradado (lineal, radial, cónico) con un control deslizante de ángulo para modos lineal y cónico.
  • Lista de paradas de colores: dos paradas para comenzar, agregue o elimine hasta seis, cada una con su propio selector de color y posición en porcentaje.
  • Línea CSS de fondo copiable más páginas preestablecidas listas para usar para degradados de puesta de sol, océano y pastel.

Beneficios clave

✓ La vista previa de ancho completo se vuelve a pintar con cada cambio (tipo, ángulo y cada parada de color) para que el CSS que copie sea exactamente lo que vio.
✓ Hasta seis paradas de color con posiciones individuales cubren todo, desde un simple desvanecimiento de dos colores hasta complejos fondos multibanda.
✓ Una declaración, tres motores: cambia entre lineal, radial y cónico sin reconstruir tus paradas.

Casos de uso

  • • Componga un fondo de sección de héroe arrastrando el ángulo y las paradas de color en lugar de editar manualmente el gradiente lineal() y recargar.
  • • Compare las paradas del mismo color como degradados lineales, radiales y cónicos con un solo interruptor: las paradas se transfieren entre tipos.
  • • Elija una combinación probada de la página preestablecida de puesta de sol, océano o pastel y ajústela a los colores de su marca.