Qué es un degradado CSS
Un degradado CSS es una transición suave entre dos o más colores, generada directamente por el navegador sin necesidad de imágenes. Se usa mucho en fondos de secciones, botones y tarjetas para dar profundidad visual sin afectar la velocidad de carga.
Degradado lineal vs. radial
El degradado lineal (linear-gradient) sigue una línea recta, con un ángulo configurable (0° a 360°) — 90° genera un degradado de arriba a abajo (por defecto), 0° genera de izquierda a derecha. El degradado radial (radial-gradient) parte de un punto central y se expande en círculo.
Sintaxis generada
El código generado sigue el estándar CSS3, por ejemplo: background: linear-gradient(90deg, #2C65F2, #FF7A3D);. Solo copia y pega en la propiedad background de tu CSS.
Consejos de uso
Los degradados con colores complementarios (opuestos en el círculo cromático) suelen tener más impacto visual; los degradados con colores cercanos (análogos) crean transiciones más discretas y profesionales.
Preguntas frecuentes
¿El degradado funciona en todos los navegadores modernos?
Sí, linear-gradient y radial-gradient tienen soporte total en todos los navegadores modernos, sin necesidad de prefijos.
¿Cómo uso el código generado en mi sitio?
Copia la línea "background: ..." y pégala en la propiedad CSS del elemento deseado, como un div, section o botón.
¿Puedo usar más de dos colores?
Esta herramienta genera degradados de dos colores, pero el código CSS resultante se puede editar manualmente para añadir más paradas de color.
¿Qué controla el ángulo en el degradado lineal?
Define la dirección de la transición de color — 0° es de izquierda a derecha, 90° es de arriba a abajo, y así sucesivamente.