Los degradados CSS le permiten mostrar transiciones suaves entre dos o más colores específicos. CSS define tres tipos de gradientes:
Gradientes lineales (baja/arriba/izquierda/derecha/diagonalmente)
Gradientes radiales (definidos por su centro)
Gradientes cónicos (girados alrededor de un punto central)
Gradientes lineales
Para crear un degradado lineal, debes definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puedes establecer un punto de partida y una dirección (o un ángulo) junto con el efecto de degradado.
Sintaxis
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Dirección - de arriba a abajo (por defecto)
El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior. Comienza en rojo, pasando a amarillo:
Ejemplo:
#grad {
background-image: linear-gradient(red, yellow);
}
Dirección - de izquierda a derecha
El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza en rojo, pasando a amarillo:
Ejemplo:
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Dirección - Diagonal
Puede hacer un degradado en diagonal especificando las posiciones de inicio horizontal y vertical.
El siguiente ejemplo muestra un degradado lineal que comienza en la parte superior izquierda (y continúa en la parte inferior derecha). Comienza en rojo, pasando a amarillo:
Ejemplo:
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Usando ángulos
Si deseas tener más control sobre la dirección del degradado, puedes definir un ángulo, en lugar de las direcciones predefinidas (hacia abajo, hacia arriba, hacia la derecha, hacia la izquierda, hacia abajo a la derecha, etc.). Un valor de 0 grados es equivalente a to top. Un valor de 90 grados es equivalente a to right. Un valor de 180 grados es equivalente a to bottom.
Sintaxis
background-image: linear-gradient(angle, color-stop1, color-stop2);
El siguiente ejemplo muestra cómo usar ángulos en degradados lineales:
Ejemplo:
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Uso de múltiples colores
El siguiente ejemplo muestra un degradado lineal (de arriba a abajo) con varias paradas de color:
Ejemplo:
#grad {
background-image: linear-gradient(red, yellow, green);
}
El siguiente ejemplo muestra cómo crear un degradado lineal (de izquierda a derecha) con el color del arcoíris y algo de texto:
Ejemplo:
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Usando transparencia
Los degradados CSS también admiten la transparencia, que se puede utilizar para crear efectos de desvanecimiento.
Para agregar transparencia, usamos la función rgba() para definir las paradas de color. El último parámetro en la función rgba() puede ser un valor de 0 a 1 y define la transparencia del color: 0 indica transparencia total, 1 indica color completo (sin transparencia).
El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza completamente transparente, con la transición a todo color rojo:
Ejemplo:
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Repitiendo linear-gradient
La función repeating-linear-gradient() se usa para repetir gradientes lineales:
Ejemplo:
Un degradado lineal repetitivo:
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Resumen
Los gradientes CSS permiten crear transiciones suaves entre dos o más colores. Se pueden definir direcciones predefinidas o ángulos personalizados para los degradados lineales, y agregar transparencia para crear efectos de desvanecimiento. También se pueden repetir gradientes lineales con la función repeating-linear-gradient().
Traducido con 💚 desde W3Schools.com