Función CSS linear-gradient()

Definición y uso

CSS linear-gradient() La función se utiliza para crear una transición lineal como fondo.

Para crear una transición lineal, debe definir al menos dos puntos de color. Los puntos de color son los colores entre los cuales desea realizar una transición suave. También puede configurar el punto de partida y la dirección (o ángulo) y el efecto de la transición.

Ejemplo de transición lineal:

Ejemplo

Ejemplo 1

Esta transición lineal comienza desde la parte superior. Transita del rojo al amarillo, y luego al azul:

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

Prueba tu mismo

Ejemplo 2

Una transición lineal que comienza a la izquierda. Transita del rojo al azul:

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

Prueba tu mismo

Ejemplo 3

Una transición lineal que comienza en la esquina superior izquierda (y se extiende a la esquina inferior derecha):

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

Prueba tu mismo

Ejemplo 4

Una transición lineal que especifica un ángulo:

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

Prueba tu mismo

Ejemplo 5

Una transición lineal de varios puntos de color:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Prueba tu mismo

Ejemplo 6

Un desplazamiento lineal con dos puntos de color:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Prueba tu mismo

Ejemplo 7

Un desplazamiento lineal con transparencia:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Prueba tu mismo

Sintaxis de CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que admite completamente la función por primera vez.

Páginas relacionadas

Tutoriales:Gradiente de CSS

Referencia：Atributo background-image CSS

Referencia：Función conic-gradient() de CSS

Referencia：Función radial-gradient() de CSS

Referencia：Función repeating-conic-gradient() de CSS

Referencia：Función repeating-linear-gradient() de CSS

Referencia：Función repeating-radial-gradient() de CSS