Gradiente de fundo CSS | Explicado

Uma cor de gradiente é composta por dois ou mais tons. No desenvolvimento da web, os designers utilizam cores diferentes em aplicativos para torná -los visualmente atraentes. Mais especificamente, os gradientes CSS são uma classe única de imagem que fornece uma mudança gradual entre cores complementares. Esses gradientes são de três tipos principais: linear, radial e cônico. Você pode utilizá -los para adicionar cores de gradiente aos elementos.

Este tutorial fornecerá um guia detalhado sobre quais são os gradientes CSS.

Quais são os tipos de gradientes CSS?

Os tipos de funções de gradiente CSS estão listados abaixo:

• Gradiente linear()
• gradiente cônico ()
• gradiente radial ()
• Gradiente linear de repetição ()
• gradiente de cônico repetido ()
• gradiente de radial de repetição ()

Cada propriedade será discutida em detalhes com demonstrações práticas.

Método 1: Como adicionar gradiente linear no CSS?

No CSS, um gradiente linear é criado com o “Gradiente linear()”Função. Para utilizá -lo, confira o próximo exemplo.

Exemplo 1: Adicionando gradiente linear simples no CSS

Em HTML, dentro do elemento corporal, adicione uma div com várias classes “retângulo simples gradiente”. Faremos uma caixa com o conteúdo da classe Div sobre o qual aplicaremos diferentes propriedades de gradiente.

Html

As duas classes mencionadas no código HTML são aplicadas com estilos usando CSS.

Estilo “retângulo” div

.retângulo
largura: 90%;
Altura: 200px;
margem: automático;

Aqui:

““largura" e "altura”A propriedade é determina o tamanho do elemento verticalmente e horizontalmente. ““margem”A propriedade gera espaço igual ao redor do elemento.

Divis de estilo “simples de gradiente”

.simples gradiente
Antecedentes: gradiente linear (azul, preto);

A div gradiente simples recebe a propriedade “fundo"Com o valor"Gradiente linear()”Função. Esta função é fornecida com duas cores, azul e preto, como parâmetros.

Salve o arquivo e abra -o no navegador. A saída será exibida como mostrado abaixo:

Exemplo 2: Adicionando gradiente linear usando ângulos no CSS

Para controlar a direção das cores, os ângulos também podem ser especificados da seguinte forma:

.gradiente de ângulo
Antecedentes: gradiente linear (40deg, amarelo, vermelho);

Saída

Exemplo 3: Adicionando gradiente linear usando mais de duas cores no CSS

Não está restrito a usar apenas duas cores. Como designer, você pode utilizar quantas cores quiser. Por padrão, as cores são igualmente espaçadas. Por exemplo:

Antecedentes: gradiente linear ( #181818, #8758FF, #EAF290, #5CB8E4, #F2F2F2, #182747);

Saída

Exemplo 4: Adicionando gradiente linear especificando paradas coloridas em porcentagens no CSS

Aqui, as cores especificadas com as porcentagens começam nesse valor especificado:

Antecedentes: gradiente linear (à esquerda, #00F5FF 20PX, #FCE700 40%, #FF6D28 60%, #EA047E 2PX);

Saída

Exemplo 5: Adicionando gradiente linear para linhas duras em CSS

Para fazer uma linha dura entre as cores, as duas ou mais paradas de cores são utilizadas no mesmo local. Na função linear-gradiente () primeiro, especifique a direção e depois as cores com porcentagem:

Antecedentes: gradiente linear (ao canto superior direito, #00ABB3 45%, #3C4048 45%);

Ao fornecer o mesmo local para as cores, obtemos o resultado conforme exibido na imagem abaixo:

Exemplo 6: Adicionando gradiente linear usando dicas de cores no CSS

O gradiente transita uniformemente de cor para cor. Você pode especificar a dica de cor para mover o ponto médio da transição. A porcentagem está definida como “50%”Para que o gradiente faça a transição da cor de azul para o vermelho:

Antecedentes: gradiente linear (azul, 50%, vermelho);

Saída

Método 2: Como adicionar gradiente cônico no CSS?

Um gradiente cônico especifica transições de cores giradas em torno de um centro. É projetado utilizando o “gradiente cônico ()”Função. Para utilizá -lo, pelo menos duas cores devem ser definidas. Além disso, por padrão, o ângulo é “0”Deg e a posição é definida como“Centro”.

Sintaxe

Imagem de fundo: gradiente cônico ([do ângulo] [na posição] color [grau], cor [grau],…);

A função de gradiente cônica () recebe três cores como parâmetros:

Antecedentes de imagem: gradiente cônico ( #FF5858, #E0144C, #9A1663);

Saída

Exemplo 1: Adicionando push-chart cônico no CSS

A função de gradiente cônica () nos fornece a instalação para criar gráficos de pizza. Para isso, é necessário especificar cores com ângulos de partida e final. Mais especificamente, para criar setores de cores distintos, o valor do ângulo de início da próxima cor deve ser igual ou menor que o valor do ângulo final da primeira cor.

Antecedentes: gradiente cônico (azul 50deg, vermelho 50deg 120deg, laranja 120deg);

Saída

Exemplo 2: Adicionando gradiente cônico usando ângulos no CSS

O gradiente cônico é circular e o centro do elemento atua como o ponto de origem da parada de cores. Existem 0 graus a 360 graus no ângulo de gradiente cônico:

Antecedentes de imagem: gradiente cônico (de 70deg, #f1d4d4, #6A097D);

Pode -se observar que a cor girou do 70DEG:

Método 3: Como adicionar gradiente radial no CSS?

Um gradiente radial pode ser criado com o “gradiente radial ()”Função. Esta função produz uma imagem que consiste em uma transição gradual entre várias cores que são utilizadas para irradiar do ponto central. Pode ser uma elipse ou um círculo.

O código abaixo mostra o “fundo”Propriedade com o valor como uma função de gradiente radial:

Antecedentes: gradiente radial (círculo, RGBA (241, 151, 216, 1) 28%, RGBA (148, 187, 233, 1) 59%);

Saída

Exemplo: adicione radial não centrado no CSS

O exemplo abaixo mostra como fazer um gradiente radial não centrado.

Antecedentes-imagens: gradiente radial (mais distante em 60px 90px,
#ff9f30 0%,
#B60C3C 100%);

Saída

Método 4: Como adicionar gradientes lineares repetidos no CSS?

A função "Gradiente linear de repetição ()”Projetou uma imagem junto a repetir gradientes lineares. Leva os parâmetros como cores, graus ou porcentagens.

Antecedentes: Repetindo-linear-gradiente (25deg, #00A8CC, #142850 23.3%);

Saída

Método 5: Como adicionar gradientes radiais repetidos no CSS?

O "gradiente de radial de repetição ()”A função gera uma imagem que consiste em gradientes de repetição que irradiam do centro.

Antecedentes: gradiente de radial de repetição ( #313131, #CA3E47 30%);

Saída

Método 6: Como adicionar gradientes cônicos repetidos no CSS?

O "gradiente de cônico repetido ()”A função produz uma imagem que consiste em um gradiente de repetição. Essas transições de cores giram em torno de um ponto central.

Aqui está um exemplo para demonstrar gradiente cônico repetido:

Antecedentes: Recorrente-gradiente (de 74deg a 86% 50%,
#A21232 0DEG 15DEG,
#1A1831 10DEG 21DEG,
#DECE9C 20DEG 31DEG);

Saída

Dessa forma, os gradientes de fundo CSS são utilizados no CSS.

Conclusão

HTML fornece muitos métodos para tornar os documentos atraentes e atraentes. Esses métodos incluem cores, formatação de texto, gradientes e muito mais. Os gradientes CSS são as imagens especiais que exibem transições de cores entre duas ou mais cores. O elemento de fundo usa principalmente funções de gradiente. Esta postagem fornecerá um guia sobre o gradiente de fundo CSS.