Gradientes cônicos em CSS

As folhas de estilo em cascata (CSS) permitem adicionar estilo às suas páginas da web de várias maneiras, fornecendo uma gama enorme de propriedades e métodos. Além disso, o CSS também fornece gradientes que permitem a exibição de uma transição uniforme de várias cores.

Há um total de três gradientes especificados em CSs, gradiente linear, gradiente radial e gradiente cônico. Neste tutorial, discutiremos os gradientes cônicos e aprenderemos a usá -los.

O que é um gradiente cônico no CSS

No CSS, um gradiente cônico é uma função embutida que permite adicionar gradientes como imagens de fundo com transições de cores em torno de um ponto médio.

Sintaxe

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

Você deve especificar pelo menos duas cores para fazer o gradiente cônico () funcionar, além disso, se você não especificar o grau de cor, as cores se espalharão uniformemente ao redor do ponto médio.

Vamos explorar alguns exemplos.

Exemplo 1

O exemplo abaixo demonstra o funcionamento do gradiente cônico () usando três cores.

Html

Aqui estamos simplesmente criando um recipiente de div para ilustrar o funcionamento de gradientes cônicos.

CSS

.div
Altura: 180px;
Largura: 180px;
Imagem de fundo: gradiente cônico (vermelho, verde, azul);

A altura e a largura da div é definida como 180px e estamos atribuindo três cores básicas à função de gradiente cônica (). Como nenhum grau das cores é especificado, portanto, essas cores se espalharão uniformemente pelo ponto médio do contêiner Div.

Saída

Um gradiente cônico com três cores.

Exemplo 2

O exemplo abaixo demonstra o funcionamento do gradiente cônico () usando quatro cores.

CSS

.div
Altura: 180px;
Largura: 180px;
Imagem de fundo: gradiente cônico (rosa, roxo, verde, amarelo);

Aqui, atribuímos quatro cores à função de gradiente cônica ().

Saída

Um gradiente cônico com quatro cores.

Agora que temos um bom entendimento do conceito, vamos explorar como adicionar diplomas aos gradientes cônicos no CSS com a ajuda de alguns exemplos.

Exemplo 3: Como adicionar diplomas ao gradiente cônico

O exemplo abaixo demonstra a maneira como você pode especificar os graus junto com as cores do gradiente cônico.

CSS

.div
Antecedentes-imagens: gradiente cônico (rosa 45deg, púrpura 90DEG, amarelo 230deg);

No código acima, estamos especificando três cores junto com o grau para cada cor.

Saída

Um gradiente cônico com graus de cor especificados.

Exemplo 4: Como fazer gráficos de pizza usando gradientes cônicos

Com o objetivo de fazer um gráfico de pizza, primeiro defina o raio da borda do contêiner Div como 50%, juntamente com alguma altura e largura.

CSS

.div
Altura: 180px;
Largura: 180px;
Radio de fronteira: 50%;
Imagem de fundo: gradiente cônico (vermelho, verde, azul);

O rádio da fronteira do elemento div foi definido para 50%.

Saída

Uma forma de pizira arredondada como forma foi gerada com sucesso.

Agora você pode criar um chart de pizza especificando a gama de graus de cor na função de gradiente cônica (), como mostrado no snippet de código CSS abaixo:

CSS

.div
Altura: 180px;
Largura: 180px;
Radio de fronteira: 50%;
Antecedentes:,
verde 90deg, verde 180deg,
azul 180deg, azul 270DEG,
270deg amarelo, amarelo 360DEG);

No código acima, especificamos quatro cores vermelhas, verdes, azuis e amarelas. Agora, para cada cor, um grau horizontal e vertical foi especificado, cobrindo assim todos os 360 graus de um círculo.

Saída

Um-chart com graus de cor definidos.

Exemplo 5: Como adicionar um gradiente cônico de um ângulo específico

Com o objetivo de adicionar gradientes cônicos de um ângulo específico, você deve especificar esse ângulo na função de gradiente cônico (). Aqui está como você faz isso.

CSS

.div
Altura: 180px;
Largura: 180px;
Radio de fronteira: 50%;
Imagem de fundo: gradiente cônico (de 270 graus, vermelho, verde, azul);

Aqui especificamos que as cores vermelhas, verdes e azuis devem se espalhar uniformemente de um ângulo de 270 graus.

Saída

Um gradiente cônico-chart de um ângulo especificado é adicionado com sucesso.

Exemplo 6: Como adicionar um gradiente cônico de uma posição específica

Como sabemos que as cores em um gradiente cônico se espalham uniformemente por um ponto médio, portanto, definindo a posição, estamos realmente definindo o ponto médio do gradiente cônico. Considere o exemplo para aprender a fazer isso.

CSS

.div
Altura: 180px;
Largura: 180px;
Radio de fronteira: 50%;
Imagem de fundo: gradiente cônico (a 30% 45%, vermelho, verde, azul);

No código acima, definimos a posição do ponto médio a 30% 45%.

Saída

Um gradiente cônico de uma posição especificado é adicionado.

Exemplo 7: Como repetir um gradiente cônico

Com o objetivo de repetir um gradiente cônico, use a função de gradiente de cônico repetido (). Considere o exemplo abaixo.

CSS

.div
Altura: 180px;
Largura: 180px;
Radio de fronteira: 50%;
Imagem de fundo: gradiente de cônico repetido (10 graus rosa, 20deg rosa, 20 graus amarelos, 30 graus amarelos);

Aqui estamos usando a função de gradiente de cônicos repetidos e usando duas cores junto com a especificação de seus diplomas.

Saída

Um gradiente cônico repetido foi inserido

Conclusão

Um gradiente cônico no CSS é uma função embutida que permite adicionar gradientes com transições de cores em torno de um ponto médio. Você tem que especificar pelo menos duas cores para fazer um gradiente cônico. Há muitas coisas divertidas que você pode fazer em um gradiente cônico, como especificar graus de cor, ângulos ou uma posição. Além disso, usando os gradientes cônicos, você também pode fazer pizinhos. Neste artigo, discutimos gradientes cônicos junto com vários exemplos.