Un gradiente es una transición suave entre dos o más colores. En CSS, los gradientes se tratan como imágenes generadas por código, así que normalmente los usamos en background o background-image.
.cabecera {
background: linear-gradient(#ffffff, #e8f0ff);
}
El navegador calcula todos los pasos intermedios entre colores. Nosotros solo le damos las paradas importantes.
Tipos de gradientes
Los gradientes lineales avanzan en línea recta. Por defecto van de arriba abajo, aunque podemos cambiar la dirección con palabras clave o ángulos.
.fondo-base {
background: linear-gradient(red, blue);
}
.fondo-lateral {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.fondo-diagonal {
background: linear-gradient(45deg, #673ab7, #ff9800, #ffeb3b);
}
También podemos indicar en qué punto aparece cada color.
.barra {
background: linear-gradient(
to right,
#2ecc71 0%,
#2ecc71 60%,
#eeeeee 60%,
#eeeeee 100%
);
}
En este ejemplo creamos una barra donde el primer color ocupa el 60%. Es una técnica sencilla para indicadores de progreso, fondos partidos o pequeños efectos decorativos.
Los gradientes radiales se expanden desde un punto central hacia afuera, en forma de círculo o elipse.
.brillo {
background: radial-gradient(circle, #ffffff, #dbeafe);
}
Podemos mover el centro del gradiente para simular un foco de luz.
.panel {
background: radial-gradient(circle at top left, #ffffff, #d7e3ff 45%, #8aa4d6);
}
Los gradientes cónicos giran alrededor de un centro, como si fueran una rueda.
.grafico-circular {
background: conic-gradient(#4caf50 0deg 120deg, #ffeb3b 120deg 240deg, #f44336 240deg);
border-radius: 50%;
}
Se usan menos que los lineales, pero pueden venir muy bien para ruedas de color, gráficos circulares o efectos de borde.
Fondos con varias capas
Una propiedad background puede tener varias capas separadas por comas. La primera capa se dibuja encima de las siguientes.
.hero {
background:
linear-gradient(rgb(0 0 0 / 60%), rgb(0 0 0 / 30%)),
url("/img/portada.jpg");
background-size: cover;
background-position: center;
}
Este patrón es muy común: ponemos un gradiente semitransparente sobre una imagen para que el texto se lea mejor.
