Generador de Gradientes CSS

¿Qué es un gradiente CSS?

Un gradiente CSS es una imagen generada por el navegador que mezcla dos o más colores de forma suave. Los gradientes lineales se desvanecen a lo largo de una línea recta con un ángulo, los radiales se expanden desde un punto central y los cónicos giran alrededor del centro como una rueda de color.

Los gradientes se escriben como una función con una lista de paradas de color, cada una con una posición sobre la línea del gradiente. Como se generan con CSS, no dependen de la resolución, casi no pesan y se pueden usar en cualquier lugar donde se admita una imagen de fondo.

Cómo crear un gradiente

1. Elige lineal, radial o cónico y ajusta el ángulo con el control deslizante.
2. Elige un color para cada parada y arrastra su posición. Agrega hasta seis paradas o pulsa Colores aleatorios para inspirarte.
3. Copia la declaración background generada en tu hoja de estilos.

Casos de uso comunes

• Secciones hero y banners - crea fondos llamativos sin cargar una imagen.
• Botones y tarjetas - aporta profundidad y color de marca a los elementos de la interfaz.
• Capas superpuestas - oscurece o tiñe fotos poniendo un gradiente encima.