Generador de Degradados
Crea el degradado perfecto para tu sitio, app o presentación: elige entre lineal, radial y cónico, agrega hasta seis colores con posición ajustable, gira el ángulo y mira el resultado en vivo en un área de vista previa grande. Cuando quede bien, copia el código CSS con un clic — o empieza desde uno de los doce predefinidos modernos y ajusta desde ahí.
Predefinidos
Código CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Ajusta los colores y posiciones, mira el resultado en vivo y copia el código listo para usar.
Tres tipos de degradado
El lineal es el clásico de fondos y botones, con dirección controlada por el ángulo. El radial irradia desde el centro, genial para efectos de brillo. El cónico gira los colores alrededor del centro, ideal para gráficos de dona y efectos creativos — y puedes alternar entre los tres manteniendo los mismos colores.
Control fino de colores
Cada color del degradado tiene su propio selector y un control de posición de 0 a 100%, permitiendo transiciones suaves o cortes marcados. Agrega hasta seis paradas de color, quita las que no quieras y prueba el botón aleatorio cuando necesites inspiración.
Cómo usar
Elige el tipo (lineal, radial o cónico), ajusta el ángulo y define los colores — o haz clic en un predefinido para empezar completo. La vista previa se actualiza en tiempo real. Cuando te guste el resultado, haz clic en "Copiar CSS" y pégalo directo en tu hoja de estilos.
Preguntas frecuentes
¿El código funciona en cualquier sitio?
Sí. El código generado usa la sintaxis estándar de degradados de CSS, soportada por todos los navegadores modernos.
¿Cuántos colores puedo usar?
De dos a seis paradas de color, cada una con posición ajustable de 0 a 100%.
¿Puedo usar los degradados comercialmente?
Sí. Los degradados son definiciones de estilo sin restricciones de uso.
¿Cuál es la diferencia entre lineal, radial y cónico?
El lineal sigue una dirección recta (controlada por el ángulo), el radial irradia del centro hacia afuera y el cónico gira los colores alrededor del punto central.