Uma folha de estilo CSS descreve como as páginas da web são apresentadas, incluindo suas cores, layouts e fontes. Existem muitas propriedades usadas para criar páginas da web atraentes, como cor, fundo, imagem de fundo, gradiente e muitos outros. Mais especificamente, os gradientes são usados ​​para adicionar várias cores ao fundo.

Neste artigo, discutiremos os gradientes CSS. Então vamos começar!

O que são gradientes CSS?

No CSS, o “gradiente”Permite exibir suavemente a transição entre cores diferentes. Você também pode exibir cores diferentes de uma vez para melhorar a aparência dos elementos html. Existem três tipos de gradientes:

• Gradiente linear
• Gradiente radial
• Gradiente cônico

Agora, exploraremos cada um dos tipos de gradiente mencionados um por um! Para esse fim, primeiro, criaremos uma div no HTML e depois aplicaremos um “gradiente”Para isso.

Exemplo

No HTML, criaremos um contêiner ou uma div com o nome da classe “div"E dentro do"”Tag, adicione um título

.

Html

Gradiente

Agora, vamos nos mudar para o arquivo CSS e usar “div”Para acessar o contêiner criado em html e definir a altura da div como“200px”. Depois disso, defina a cor do cabeçalho como “RGB (1, 32, 4)”E o tamanho da fonte como“35px”. Em seguida, adicione a borda ao redor da div, largura como “5px", Estilo como"cume”E cor como“RGB (0, 0, 0)”.

CSS

div
Altura: 200px;
Cor: RGB (1, 32, 4);
Size da fonte: 35px;
borda: 5px Ridge RGB (0, 0, 0);

Usando o código acima, a seguinte saída é obtida:

Agora, aplicaremos os tipos de gradiente na div.

O que são gradientes lineares CSS?

Para gerar um gradiente linear, o “Gradiente linear()”A função do CSS é usada como um valor do“imagem de fundo" ou "fundo" propriedade. Com esta função, uma imagem composta por uma progressão semelhante a uma linha de cores diferentes pode ser criada. Existem vários tipos de gradientes lineares, como repetir gradientes lineares, gradientes da esquerda para a direita e gradientes da direita para a esquerda.

Sintaxe

A sintaxe do “Gradiente linear()”A função é:

Imagem de fundo: gradiente linear (direção, cor-1, cor-2,…);

Aqui o "direção”O parâmetro é usado para definir a direção do gradiente linear a partir do qual a transição iniciará como para cima, direita, esquerda e inferior. Você pode adicionar várias cores a esta função.

Como continuação do exemplo anterior, aplicaremos um simples “Gradiente linear()”Função para a div.

Exemplo

Aqui, vamos usar o “Gradiente linear()”Função no“imagem de fundoPropriedade e adicione orientação como “para cima”; Esta é a direção padrão da função. Depois disso, adicionaremos três cores como “RGB (0, 255, 213)","RGB (187, 255, 0)", e "RGB (51, 255, 0)”Para o nosso gradiente:

div
..
Antecedentes de imagem: gradiente linear (para cima, RGB (0, 255, 213), RGB (187, 255, 0), RGB (51, 255, 0));

Na imagem abaixo fornecida, você pode ver que um gradiente linear é gerado:

Agora, vá para o próximo tipo em que mudaremos a direção do gradiente linear como “para a direita”.

Gradiente linear para a direita

Para gerar um gradiente linear para a direita, mudaremos a direção de “para cima" para " para a direita”E definiu cinco cores diferentes como“RGB (32, 42, 134)","RGB (202, 231, 255)","RGB (0, 255, 170)","RGB (85, 250, 79)", e "RGB (128, 243, 138)”:

div
..
Antecedentes de imagem: Gradiente linear (à direita, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

Na saída abaixo, você pode ver que o gradiente linear é criado na direção certa:

Em seguida, mudaremos a direção do gradiente linear para “para a esquerda”.

Gradiente linear à esquerda

Aqui, vamos mudar a direção para “para a esquerda”. As cores serão usadas da mesma forma que no exemplo acima:

div
..
Antecedentes de imagem: gradiente linear (à esquerda, RGB (32, 42, 134), RGB (202, 231, 255), RGB (0, 255, 170), RGB (85, 250, 79), RGB (128 , 243, 138));

Você pode ver na saída abaixo que o gradiente linear à esquerda é criado perfeitamente:

Você também pode criar uma transição repetida de cores. Então, vamos fazer isso!

Repetindo gradientes lineares

Para criar gradientes lineares repetidos, o “Graduados lineares de repetição ()”A função é usada. Neste tipo de gradiente linear, a sequência da cor é repetida de acordo com o valor fornecido.

Sintaxe

A sintaxe do “Graduados lineares de repetição ()" é:

Imagem de fundo: gradiente linear de repetição (comprimento da parada de cor da cor, comprimento da parada de cor,…);

Na sintaxe acima, “comprimento de parada de cor”É utilizado para definir a distância entre as paradas de primeira e última cor que determina o comprimento do gradiente que se repete.

Vamos continuar com o exemplo anterior.

Exemplo

Aqui, definiremos a cor do texto como “branco”E adicione o valor das cores do gradiente no“Graduados lineares de repetição ()" funções. Além de todas as cores, especificaremos o “comprimento de parada de cores" como "0px","20px", e "40px”. É usado para repetir as cores após o comprimento fornecido:

div
..
cor branca;
Antecedentes-imagens: Gradiente linear de repetição (RGB (122, 12, 145) 0px, RGB (171, 76, 209) 20px, RGB (13, 0, 128) 40px);

Observação: Sem o “comprimento de parada de cor”Valor, o gradiente linear não pode ser definido para repetição.

Na imagem abaixo fornecida, você pode ver que o gradiente linear é repetido:

O que são gradientes radiais CSS?

Um gradiente radial é uma transição de cores para onde a transição começa a partir da origem do elemento. Para criar um gradiente radial, o “gradiente radial ()”A função é usada na qual você pode especificar a forma da transição e cores.

Sintaxe

A sintaxe do “gradiente radial ()”A função é:

Imagem de fundo: gradiente radial (forma, cor de partida,…, última cor);

Você pode definir a forma do “gradiente radial ()”Funciona como um“elipse" ou "círculo”.

Exemplo

Aqui, continuaremos o exemplo anterior e usaremos o “gradiente radial ()”Função para definir a forma da transição como um“elipse”. Em seguida, adicionaremos cinco cores diferentes como “RGB (17, 0, 255)","RGB (0, 174, 255)","RGB (109, 250, 255)","RGB (0, 190, 79)", e "RGB (2, 70, 2)”:

div
..
Antecedentes de imagem: gradiente radial (Ellipse, RGB (17, 0, 255), RGB (0, 174, 255), RGB (109, 250, 255), RGB (0, 190, 79), RGB (2, 70, 2));

A imagem abaixo fornecida indica que a transição de cor começou com sucesso a partir da origem do elemento:

Agora, vamos nos mudar para o último tipo de gradiente.

O que são gradientes cônicos CSS?

O "gradiente cônico ()”A função é usada para criar um gradiente cônico. É um gradiente onde as transições de cores são giradas em torno de um ponto central. Para criar um gradiente cônico, pelo menos duas cores devem ser definidas.

Sintaxe

A sintaxe do “gradiente cônico ()”A função é:

Imagem de fundo: gradiente cônico (cor, cor,… cor);

Você pode definir várias cores na função do “gradiente cônico ()”.

Vamos mudar para o exemplo em que criaremos o gradiente cônico.

Exemplo

Agora vamos definir a cor do cabeçalho como “branco”. Em seguida, use o “gradiente cônico ()”Funciona e crie um gradiente cônico de arco -íris adicionando cores de arco -íris, como“vermelho","laranja","amarelo","verde","azul","índigo", e "tolet”:

div
cor branca;
Imagem de fundo: gradiente cônico (vermelho, laranja, amarelo, verde, azul, índigo, violeta);

Aqui está o resultado que demonstra que o gradiente cônico é criado com sucesso:

É isso! Nós explicamos o gradiente CSS em detalhes.

Conclusão

O CSS “gradiente”Permite exibir transições suaves entre duas ou mais cores especificadas. Existem três tipos de funções de gradiente usadas como um valor de “fundo”Propriedade em CSS, como“Gradiente linear()","gradiente radial ()", e "gradiente cônico ()”. Neste manual, explicamos o gradiente CSS e seus tipos em detalhes.