Los gradientes CSS permiten mostrar transiciones suaves entre dos o más colores específicos. CSS define tres tipos de gradientes:
- Gradientes lineales
- Gradientes radiales
- Gradientes cónicos
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, ...);
Ejm
#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.
Ejm
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Usando múltiples colores
Ejm
#grad {
background-image: linear-gradient(red, yellow, green);
}
Ejm 2
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Usando transparencias
Ejm
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
Repititendo gradiente lineal
Ejm
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
Gradiente radial
Un gradiente radial es definido por su centro. Para crear un gradiente radial debes definir al menos dos colores.
Sintaxis
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
De forma predeterminada, la forma es elipse, el tamaño es la esquina más alejada y la posición es el centro.
Ejm
#grad {
background-image: radial-gradient(red, yellow, green);
}
Ejm2
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Gradiente cónico
Un degradado cónico es un degradado con transiciones de color giradas alrededor de un punto central. Para crear un degradado cónico, debes definir al menos dos colores.
Ejm
#grad {
background-image: conic-gradient(red, yellow, green);
}
Varios colores
Ejm
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}