Gradientes CSS
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 CSS
Para crear un degradado lineal, debe definir al menos dos paradas de color. Las paradas de color son los colores entre los que desea generar transiciones suaves. También puede 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 (esto es predeterminado)
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 desea tener más control sobre la dirección del degradado, puede 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 "a la derecha". Un valor de 180 grados es equivalente a "hasta abajo".
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 varias paradas de color
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);
}
Uso de la 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));
}
Repetir un gradiente lineal
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%);
}