Um gradiente refere -se a uma imagem com efeitos de transição, e um gradiente pode ser usado em qualquer lugar, como imagens. Os gradientes são criados com a ajuda do CSS e se oferece para criar gradientes com propriedades extensas. Por exemplo, um gradiente pode ser linear, radial ou cônico. Cada tipo de gradiente é assistido pela respectiva função.

Neste artigo, fornecemos uma visão dos gradientes no CSS e os seguintes resultados de aprendizado são esperados.

• Tipos de gradientes em CSS
• função de gradiente linear ()
• Função de gradiente radial ()
• Função de gradiente cônica ()

Tipos de gradiente no CSS

O gradiente pode ser dividido em três categorias, linear, radial e cônico. As próximas seções apresentarão o básico de cada tipo de gradiente e como são usados ​​no CSS.

Gradiente linear

O gradiente linear pode ser aplicado para obter o efeito de transição em uma dimensão linear (uma direção ao mesmo tempo).

Como usar a função linear-gradiente ()

A função linear-gradiente () permite criar um gradiente linear com vários efeitos.

O direção do gradiente linear pode aceitar os seguintes valores

para a direita: usado para mostrar o gradiente da direção esquerda para a direita

para a esquerda: para mostrar o gradiente da direita para a esquerda

para baixo (por padrão): em direção ao fundo

para cima: mostra o efeito do gradiente de baixo para cima

Além disso, o efeito do gradiente linear também pode ser aplicado na diagonal, usando os seguintes valores do direção parâmetro.

para o canto inferior direito: O gradiente começará do canto superior esquerdo e se inclina para o canto inferior direito

ao canto inferior esquerdo: O gradiente começa no canto superior direito em direção ao canto inferior esquerdo

para o canto do canto direito: começa no canto inferior esquerdo em direção ao canto superior direito

para o canto superior esquerdo: Do canto inferior direito ao canto superior esquerdo

Exemplo

O código a seguir pratica o uso de gradiente linear em um elemento HTML.

Html

Gradiente linear

O código acima cria um e um

elemento dentro daquela div.

CSS

O código acima usa um gradiente linear com os seguintes valores

• A direção está definida como “da esquerda para direita““
• O valor de color1 e color2 é definido como roxo e LightseAgreen respectivamente

Saída

Como a direção do gradiente era da esquerda para a direita, portanto o roxo A cor começa da esquerda, enquanto o LightseAGreEncolor começa da direita.

Gradiente radial

Como o nome mostra, o gradiente radial é gerado a partir do ponto central da imagem. O efeito de transição pode ser gerado na forma de um círculo ou um eclipse.

Como usar a função de gradiente radial ()

Um gradiente radial pode ser criado seguindo a sintaxe fornecida abaixo.

Imagem de fundo: gradiente radial (tamanho da forma na posição, color1, color2…);

Na sintaxe acima,

• o forma (o padrão é uma elipse) pode ser uma elipse ou círculo
• o tamanho (o padrão é mais distante) pode aceitar o mais antigo canto/distante, o lado mais próximo/mais próximo do canto mais próximo.
• o gradiente vai começar de color1 (no centro, em forma de eclipse ou em forma de círculo) seguido por color2 e assim por diante.

Exemplo

O código escrito abaixo mostra a criação do gradiente radial.

Html

Gradiente radial

CSS

O CSS acima cria um gradiennt radial com color1 = "verde", color2 = "amarelo" e color3 = "vermelho".

Saída

Observa -se a partir da saída que o gradiente começou com a cor verde, cercada por amarelo, e o vermelho está no final.

Gradiente cônico

O gradiente cônico é usado para criar um gradiente de tal maneira que cada cor começa e girada ao redor do centro. Eles são parecidos com gradiente radial, mas as cores são paradas na borda da forma, enquanto a cor nas paradas de gradiente radial

Como usar gradiente cônico

O gradiente cônico pode ser criado seguindo a sintaxe fornecida abaixo: