Observa-se da sintaxe que a função linear-gradiente () depende do parâmetro de direção e das cores que estão sendo usadas.

O parâmetro de direção define o ponto de partida e aceita os seguintes valores:

• "To top" ou "0deg": começa de baixo para o topo
• "To Right" ou "90Deg": Gradiente começa da esquerda para o lado direito
• "Para baixo" ou "180DEG": de cima para baixo
• "Para a esquerda" ou "270Deg": começa do lado direito em direção ao lado esquerdo

Os parâmetros acima mencionados têm equivalência com os ângulos. Como, você pode definir o início do gradiente com a ajuda de ângulos também. A equivalência de ângulos e laterais é descrita como: "to top" = "0deg", "para a direita" = "90DEG", "para baixo" = "180DEG" e "para a esquerda" = "270DEG".

Exemplo 1: Gradiente linear com parâmetros padrão

Para praticar o gradiente linear em nível básico, usamos o seguinte código.

Html

Gradiente linear

CSS

No código acima, o parâmetro de direção da função de gradiente linear é definido como o valor padrão. Onde o gradiente começaria da cor verde e passaria para a cor vermelha.

Saída

A partir da saída, observa-se que a direção padrão da função de gradiente linear é de cima para baixo.

Exemplo 2: Um gradiente linear personalizado

Este exemplo demonstra a criação de um gradiente com valores personalizados de direção e ângulos de cores.

Html

Gradiente linear

CSS

O código CSS acima é descrito como,

• para a direita: mostra a direção do gradiente da esquerda para a direita
• Green 10%: mostra que o efeito de transição começará a partir de 10% de toda a duração do gradiente
• vermelho 50%: Isso mostra que o efeito de transição subirá para 50% da duração do gradiente

Saída

A saída mostra que o verde sólido continua até o comprimento de 10%. A transição começa em 10% e continua até 50% do comprimento. Após 50%, a cor vermelha sólida começa que terminará com o comprimento do gradiente.

Exemplo 3: Um gradiente linear repetitivo

A função de gradiente linear () pode ser usada para criar um gradiente repetitivo.

Html

Um gradiente linear repetido

CSS

O código CSS acima é descrito como,

• A direção seria deixada para a direita, pois o ângulo é 90DEG
• O gradiente começaria a partir de vermelho seguido de verde e verde -marinho leve. Essas cores serão repetidas até que a duração do gradiente termine

Observação: Você precisa definir a porcentagem com pelo menos a última cor. Caso contrário, o padrão não será repetido.

Saída

A saída acima mostra que o gradiente com cores vermelhas, verdes e luminárias está sendo repetido várias vezes até todo o comprimento do gradiente.

Conclusão

Um gradiente linear no CSS pode ser criado usando o gradiente linear () da função do CSS. Esta função aceita vários parâmetros que definem a direção do gradiente e a cor que está sendo usada. Este artigo fornece um guia descritivo sobre gradientes lineares no CSS. Seguindo este post, você seria capaz de obter o conceito básico de gradientes lineares em CSS com exemplos demonstrando a criação de gradientes lineares em CSS. Além disso, uma função de gradiente linear () pode ser exercida para criar um gradiente repetitivo.