Fondos Degradados
Los degradados CSS le permiten mostrar transiciones suaves entre dos o más colores especificados.
CSS define dos tipos de degradados:
- Degradados lineales (baja / arriba / izquierda / derecha / diagonalmente)
- Gradientes radiales (definidos por su centro)
Degradados 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
imagen de fondo: degradado lineal (dirección, 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:
de arriba a abajo (predeterminado)
Dirección: de izquierda a derecha
El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza en rojo, pasando a amarillo:
de izquierda a derecha
Ejemplo
#grad {
imagen de fondo: degradado lineal (a la derecha, rojo, amarillo);
}
Inténtalo tú mismo »
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 va hacia la parte inferior derecha). Comienza en rojo, pasando a amarillo:
de arriba a la izquierda a abajo a la derecha
Ejemplo
#grad {
imagen de fondo: degradado lineal (abajo a la derecha, rojo, amarillo);
}
Inténtalo tú mismo »
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 0deg es equivalente a «to top». Un valor de 90 grados es equivalente a «a la derecha». Un valor de 180 grados equivale a «abajo».
Sintaxis
imagen de fondo: degradado lineal (ángulo, color-stop1, color-stop2);
El siguiente ejemplo muestra cómo usar ángulos en gradientes lineales:
180 grados
Ejemplo
#grad {
imagen de fondo: degradado lineal (180 grados, rojo, amarillo);
}
Inténtalo tú mismo »
Uso de paradas de varios colores
El siguiente ejemplo muestra un degradado lineal (de arriba a abajo) con múltiples paradas de color:
Ejemplo
#grad {
imagen de fondo: degradado lineal (rojo, amarillo, verde);
}
Inténtalo tú mismo »
El siguiente ejemplo muestra cómo crear un degradado lineal (de izquierda a derecha) con el color del arco iris y algo de texto:
Fondo del arco iris
Ejemplo
#grad {
imagen de fondo: degradado lineal (a la derecha, rojo, naranja, amarillo, verde, azul, índigo, violeta);
}
Inténtalo tú mismo »
Usar 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 de la función rgba () puede ser un valor de 0 a 1, y define la transparencia del color: 0 indica transparencia total, 1 indica todo color (sin transparencia).
El siguiente ejemplo muestra un degradado lineal que comienza desde la izquierda. Comienza completamente transparente, pasando a rojo a todo color:
Ejemplo
#grad {
imagen de fondo: gradiente lineal (a la derecha, rgba (255,0,0,0), rgba (255,0,0,1));
}
Inténtalo tú mismo »
Repitiendo un gradiente lineal
La función repeating-linear-gradient () se utiliza para repetir gradientes lineales:
Ejemplo
Un gradiente lineal repetido:
#grad {
imagen de fondo: gradiente lineal repetido (rojo, amarillo 10%, verde 20%);
}
Inténtalo tú mismo »