Se observa a partir de la sintaxis que la función de gradiente lineal () depende del parámetro de dirección y los colores que se usan.

El parámetro de dirección define el punto de partida y acepta los siguientes valores:

• "Top" o "0deg": Comienza desde la parte inferior hacia la parte superior
• "A la derecha" o "90deg": el gradiente comienza desde la izquierda hacia el lado derecho
• "A fondo" o "180deg": de arriba a abajo
• "A la izquierda" o "270deg": Comienza desde el lado derecho hacia el lado izquierdo

Los parámetros indicados anteriormente tienen equivalencia con los ángulos. Como, puedes definir el inicio del gradiente con la ayuda de los ángulos también. La equivalencia de los ángulos y los lados se describe como: "para superar" = "0deg", "a la derecha" = "90deg", "a fondo" = "180deg" y "a la izquierda" = "270deg".

Ejemplo 1: Gradiente lineal con parámetros predeterminados

Para practicar el gradiente lineal en un nivel básico, hemos utilizado el siguiente código.

Html

Gradiente lineal

CSS

En el código anterior, el parámetro de dirección de la función de gradiente lineal se establece en el valor predeterminado. Donde el gradiente comenzaría desde el color verde y la transición hacia el color rojo.

Producción

Desde la salida, se observa que la dirección predeterminada de la función de gradiente lineal es de arriba a abajo.

Ejemplo 2: un gradiente lineal personalizado

Este ejemplo demuestra la creación de un gradiente con valores personalizados de dirección y ángulos de color.

Html

Gradiente lineal

CSS

El código CSS anterior se describe como,

• a derecha: muestra la dirección del gradiente de izquierda a derecha
• Verde 10%: muestra que el efecto de transición comenzará desde el 10% de la longitud completa del gradiente
• rojo 50%: Esto muestra que el efecto de transición aumentará hasta el 50% de la longitud del gradiente

Producción

La salida muestra que el verde sólido continúa hasta la longitud del 10%. La transición comienza desde el 10% y continúa hasta el 50% de la longitud. Después del 50%, el color rojo sólido comienza que terminará con la longitud del gradiente.

Ejemplo 3: un gradiente lineal repetitivo

La función repetitiva-lineal-gradiente () se puede usar para crear un gradiente repetitivo.

Html

Un gradiente lineal repetido

CSS

El código CSS anterior se describe como,

• la dirección se dejaría a la derecha ya que el ángulo es de 90 grados
• el gradiente comenzaría desde el rojo seguido de verde y verde marítimo. Estos colores se repetirán hasta que termine la longitud del gradiente

Nota: Tienes que definir el porcentaje con al menos el último color. De lo contrario, el patrón no se repetirá.

Producción

La salida anterior muestra que el gradiente con colores rojos, verdes y luces de luz se repite varias veces hasta la longitud del gradiente.

Conclusión

Se puede crear un gradiente lineal en CSS utilizando la función de gradiente lineal () de CSS. Esta función acepta múltiples parámetros que definen la dirección del gradiente y el color que se usa. Este artículo proporciona una guía descriptiva sobre gradientes lineales en CSS. Siguiendo esta publicación, podrá obtener el concepto básico de gradientes lineales en CSS con ejemplos que demuestran la creación de gradientes lineales en CSS. Además, se puede ejercer una función repetitiva-lineal-gradiente () para crear un gradiente repetitivo.