Fundamentos dos gradientes CSS
Os gradientes CSS são transições visuais entre duas ou mais cores, aplicadas como imagens de fundo em elementos de design web. Em vez de depender de arquivos de imagem estáticos, os navegadores renderizam essas transições diretamente por meio de código, o que otimiza o tempo de carregamento das páginas e mantém a nitidez em qualquer resolução de tela.
O comportamento visual de um gradiente é determinado pelo seu tipo, pela direção ou formato de propagação e pela distribuição das cores ao longo do espaço disponível. O Gerador de Gradientes permite configurar esses parâmetros de forma visual, gerando o código CSS correspondente em tempo real.
Gradientes lineares: direção e pontos de cor
O gradiente linear mistura as cores ao longo de uma linha reta. A orientação dessa linha é definida por um valor numérico de ângulo.
- Direção por ângulo: O controle de ângulo define para onde o gradiente aponta. O valor de 0° aponta diretamente para cima, enquanto o valor de 90° aponta para a direita. À medida que o ângulo é alterado, a linha de transição gira no sentido horário.
- Distribuição: As cores se misturam perpendicularmente à linha de direção, criando faixas de transição suaves que cobrem toda a área do elemento.
Gradientes radiais: formatos e distribuição
Diferente do alinhamento linear, o gradiente radial espalha as cores para fora a partir do centro. Esse tipo de gradiente não utiliza um controle de ângulo para direcionamento. Em vez disso, a propagação é estruturada por meio de duas formas geométricas selecionáveis:
- Elipse: As cores se espalham adaptando-se às proporções de largura e altura do elemento, resultando em uma transição ovalada.
- Círculo: A transição mantém uma simetria circular perfeita, independentemente das dimensões do elemento de fundo.
Gradientes cônicos: rotação ao redor do centro
O gradiente cônico realiza a transição de cores girando ao redor de um ponto central, de maneira semelhante aos ponteiros de um relógio ou a um círculo cromático.
A rotação inicial do gradiente cônico é controlada por um valor de ângulo. Assim como no modelo linear, o ângulo de 0° inicia a transição apontando para cima, e o ajuste desse valor rotaciona o ponto de partida da varredura de cores ao redor do centro.
O papel dos pontos de cor no design de gradientes
Os pontos de cor (color stops) determinam quais tonalidades compõem o gradiente e onde cada uma delas deve se posicionar. Cada ponto de cor é composto por um valor de cor e uma posição percentual que varia de 0% (início do gradiente) a 100% (fim do gradiente).
O Gerador de Gradientes inicia com uma configuração padrão de dois pontos de cor:
#6366f1posicionado em0%#ec4899posicionado em100%
Ao adicionar um novo ponto de cor, ele assume a posição padrão de 50%. É possível configurar até oito pontos de cor simultaneamente para criar transições complexas. Quando o limite de oito pontos é atingido, o botão "Adicionar ponto" é desativado pelo sistema.
Como usar o Gerador de Gradientes
O processo de criação e exportação do código CSS é feito através da interface visual do gerador:
- Selecione o Tipo de gradiente: Escolha entre as opções "Linear", "Radial" ou "Cônico".
- Defina a orientação: Para os tipos "Linear" ou "Cônico", ajuste o controle de "Ângulo". Para o tipo "Radial", selecione o "Formato" entre "Elipse" ou "Círculo".
- Configure os Pontos de cor: Altere as cores e ajuste a "Posição" de cada ponto entre 0% e 100%. Use o botão "Adicionar ponto" para inserir novas cores ou "Remover ponto" para excluir as existentes.
- Copie o código: O painel "CSS" exibe o código gerado em tempo real. Clique em "Copiar CSS" para transferir o código para a área de transferência; o botão mudará temporariamente para "Copiado" para confirmar a ação.
Toda a renderização do gradiente ocorre diretamente no navegador do usuário. Nenhuma das configurações, cores ou parâmetros definidos na ferramenta é enviada para o BroBroGo.
Perguntas Frequentes
Qual é a diferença entre gradientes lineares, radiais e cônicos? Um gradiente linear mistura as cores ao longo de uma linha reta que você direciona com um ângulo. Um gradiente radial as espalha para fora a partir do centro em formato de círculo ou elipse. Um gradiente cônico gira as cores ao redor do centro, como em um círculo cromático.
O que são pontos de cor (color stops)? Cada ponto de cor (color stop) é uma cor fixada em uma posição ao longo do gradiente — 0% no início, 100% no fim. Mova um ponto para mudar onde a cor atinge seu pico ou adicione mais pontos para uma mistura mais rica. Você pode usar até oito pontos.
Como controlo a direção? Para gradientes lineares ou cônicos, o controle de ângulo define a direção — 0° aponta para cima, 90° para a direita. Gradientes radiais não possuem ângulo; em vez disso, escolha o formato de círculo ou elipse para alterar como ele se espalha.