Función CSS linear-gradient()

Ejemplo

El siguiente ejemplo demuestra un degradado lineal que comienza desde la parte superior, comienza con rojo, pasa a amarillo y luego a azul:

#grad { background-image: linear-gradient(red, yellow, blue); }

Pruébalo »

Definición y uso

La función linear-gradient() se utiliza para crear una imagen que representa un degradado lineal de dos o más colores.

Para crear un degradado lineal, es necesario especificar dos colores. También se puede lograr un efecto de degradado en diferentes direcciones (especificado como un ángulo). Si no se especifica la dirección, el degradado se aplica de arriba a abajo por defecto.

/*De arriba a abajo, degradado de azul a rojo*/ linear-gradient(blue, red); /*Eje del degradado a 45 grados, de azul a rojo*/ linear-gradient(45deg, blue, red); /*De abajo a la derecha a arriba a la izquierda, de azul a rojo*/ linear-gradient(to left top, blue, red); /*De abajo a arriba, el degradado comienza con azul, en la posición del 40% de altura comienza el degradado verde y finalmente termina con rojo*/ linear-gradient(0deg, blue, green 40%, red);

Generador de colores de degradado en línea CSS:https://www.jyshare.com/front-end/9921/。

Ejemplos de degradado lineal

Versión compatible: CSS3

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite la función.

Los números especificados por «webkit», «moz» u «o» indican la primera versión con prefijo que admite la función.

Función
linear-gradient()	26.0 10.0 -webkit-	10.0	16.0 3.6 -moz-	6.1 5.1 -webkit-	12.1 11.1 -o-

Sintaxis CSS

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

Valor	Descripción
direction	Especifica la dirección (o ángulo) del degradado usando un valor de ángulo.
color-stop1, color-stop2,...	Se utiliza para especificar el color inicial y final del degradado.