Generador de degradados CSS
Genera código CSS para degradados lineales y radiales personalizados a partir de dos colores y un ángulo.
Ejecutar herramienta
Genera código CSS para degradados lineales y radiales personalizados, listos para usar en tus hojas de estilo. Elige dos colores base: el primero usa por defecto #ff6b6b y el segundo #4ecdc4, pero puedes cambiarlos por cualquier valor hexadecimal, nombre de color estándar o formato funcional compatible con navegadores modernos. En los degradados lineales, define la orientación con un ángulo en grados (por defecto 45 si el campo está vacío). Al seleccionar la opción radial, obtienes una transición circular centrada con los mismos colores. La herramienta inserta las cadenas de color directamente en la regla CSS resultante, sin validarlas, lo que te da total flexibilidad para usar formatos como hsl(), rgb() o rgba(). Copia el bloque generado y pégalo en fondos de contenedores, botones o cualquier elemento web. Con este generador online y gratuito, evitas escribir la sintaxis manualmente y aceleras tu maquetación.
Instrucciones
- Introduce el primer color en formato hexadecimal o mantén el valor inicial.
- Indica el segundo color que formará el extremo de la transición.
- Selecciona la variante de degradado deseada, ya sea lineal o radial.
- Ajusta el ángulo de inclinación en grados si utilizas la opción lineal.
- Ejecuta la herramienta para ver la declaración CSS generada y cópiala en tu hoja de estilos.
Ejemplos
- Degradado lineal estándar a 90 grados entre #ff6b6b y #4ecdc4 para una barra de navegación horizontal.
- Degradado radial circular con #1a2a6c y #fdbb2d para crear un fondo decorativo centrado.
Preguntas frecuentes
¿Qué ocurre si introduzco un ángulo superior a 360 grados?
Se ajusta automáticamente al equivalente entre 0 y 360 grados. Por ejemplo, 405 grados se convierte en 45 grados.
¿Cómo se gestionan los tipos de degradado distintos a radial?
Si seleccionas "lineal", se genera un degradado con el ángulo que hayas configurado. La opción "radial" crea una transición circular centrada.
¿Comprueba la herramienta si los códigos de color son válidos?
La herramienta no comprueba si los códigos de color son válidos; asegúrate de que su sintaxis sea correcta antes de usarlos.