Generador de Gradientes CSS

¿Qué es un generador de gradientes CSS?

Un gradiente CSS es una transición suave entre dos o más colores, definida con la función linear-gradient o radial-gradient. Este generador te permite crear el gradiente visualmente —eligiendo dirección, ángulo, colores y posición— y genera automáticamente el código CSS listo para pegar en tu hoja de estilos. No hace falta recordar la sintaxis: arrastra, elige y copia.

Cómo usar esta herramienta

1. Elige entre gradiente lineal o radial con las pestañas superiores.
2. Configura la dirección o el ángulo y añade los colores que necesites.
3. Observa la vista previa en vivo y ajusta hasta que te guste el resultado.
4. Copia el código CSS y úsalo en tu proyecto.

Consejos de diseño

• Los gradientes con más de dos colores crean efectos más ricos; prueba con 3 o 4 para fondos de héroe.
• Usa colores con luminosidad similar para transiciones armónicas, o contrastes fuertes para impacto visual.
• Aplica gradientes a fondos, botones, textos (con background-clip) y bordes para modernizar cualquier interfaz.

Preguntas frecuentes

¿Qué diferencia hay entre linear-gradient y radial-gradient?

linear-gradient transiciona en línea recta en una dirección o ángulo; radial-gradient se expande desde un punto central en forma de círculo o elipse. El lineal es ideal para fondos de página; el radial para resaltar un foco o imitar luz.

¿El código generado funciona en todos los navegadores?

Sí. Las funciones linear-gradient y radial-gradient sin prefijos están soportadas en todos los navegadores modernos desde 2020.