Funcionamento do Gerador de Gradientes
Esta ferramenta permite criar um gradiente CSS personalizado através da seleção do seu tipo, do ajuste da sua direção ou formato, e da adição de até oito pontos de cor. À medida que realiza alterações nos controlos, a ferramenta apresenta uma visualização em tempo real do gradiente. O código CSS correspondente é gerado de forma automática e pode ser copiado com um único clique.
O estado inicial da ferramenta apresenta um gradiente predefinido com dois pontos de cor: #6366f1 na posição 0% e #ec4899 na posição 100%.
Parâmetros de Entrada e Configuração
Para moldar o gradiente, o utilizador pode configurar os seguintes parâmetros na interface:
- Tipo de gradiente: Seleção entre as opções "Linear", "Radial" ou "Cônico".
- Ângulo: Um valor numérico aplicável aos gradientes lineares ou Cônico.
- Formato: Escolha entre "Elipse" ou "Círculo", aplicável exclusivamente aos gradientes radiais.
- Pontos de cor: Definição de até oito pontos de cor individuais. Cada ponto de cor é composto por:
- Cor do ponto: O valor cromático pretendido.
- Posição: Um valor percentual que varia entre 0% e 100%.
Quando o utilizador adiciona um novo ponto de cor através do botão "Adicionar ponto", este assume por defeito a posição de 50%. A ferramenta suporta um limite máximo de oito pontos de cor. Assim que este limite é atingido, o botão "Adicionar ponto" fica desativado.
Resultados Gerados
A ferramenta processa as configurações em tempo real e disponibiliza dois resultados:
- Visualização: Uma representação visual imediata do comportamento do gradiente conforme os parâmetros definidos.
- CSS: O código CSS formatado e pronto a ser aplicado em folhas de estilo.
Após clicar no botão "Copiar CSS", o estado do botão altera-se temporariamente para "Copiado" para confirmar que o código foi transferido com sucesso para a área de transferência.
Tipos de Gradiente e Comportamento Geométrico
O comportamento visual do gradiente depende diretamente do tipo selecionado:
Gradientes Lineares
Um gradiente linear mistura as cores ao longo de uma linha reta. A direção desta transição é determinada pelo ângulo definido no seletor. No sistema de coordenadas do CSS utilizado pela ferramenta, um ângulo de 0° aponta diretamente para cima, enquanto um ângulo de 90° aponta para a direita.
Gradientes Radiais
Um gradiente radial espalha as cores para fora a partir do centro. Este tipo de gradiente não utiliza um ângulo de direção. Em vez disso, o utilizador define o formato da transição, optando por uma "Elipse" (que se ajusta às proporções do contentor) ou por um "Círculo" (que mantém uma distribuição circular perfeita).
Gradientes Cônicos
Um gradiente cônico varre as cores ao redor de um ponto central, assemelhando-se ao comportamento de um círculo cromático ou ao movimento dos ponteiros de um relógio. A rotação inicial deste varrimento é controlada pelo valor do ângulo, onde 0° define o ponto de partida no topo (para cima) e 90° roda o ponto de partida para a direita.
Direções dos Ângulos:
0° (Cima)
│
270° ─────┼───── 90° (Direita)
│
180° (Baixo)
O Papel dos Pontos de Cor (Color Stops)
Os pontos de cor funcionam como âncoras que fixam uma determinada cor a uma posição específica ao longo do percurso do gradiente. A escala de posicionamento varia entre 0% (que representa o ponto inicial da transição) e 100% (que representa o ponto final).
Ao ajustar a percentagem de cada ponto de cor, altera-se o ritmo da transição entre as cores vizinhas. É possível aproximar os pontos de cor para criar transições mais abruptas ou afastá-los para obter uma mistura mais suave e progressiva.
Aplicação Prática em Web Design
Esta ferramenta é útil para diferentes perfis de utilizadores:
- Alguém que deseja criar um fundo CSS.
- Um utilizador que necessita de ajustar duas cores e uma direção para um gradiente.
- Um designer ou programador front-end que precisa de ajustar o tipo, a posição e múltiplos pontos de cor de um gradiente.
Processamento Local e Privacidade
A privacidade dos dados é assegurada pelo modelo de execução da ferramenta. Cada gradiente é renderizado diretamente no seu navegador. Nada do que definir aqui é carregado para o BroBroGo. Todo o processamento de cor, cálculo de transições e geração de código CSS ocorre localmente no dispositivo do utilizador.
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 direciona com um ângulo. Um gradiente radial espalha-as 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 num círculo cromático.
O que são pontos de cor (color stops)? Cada ponto de cor (color stop) é uma cor fixada numa posição ao longo do gradiente — 0% no início, 100% no fim. Mova um ponto para mudar onde a cor atinge o seu pico ou adicione mais pontos para uma mistura mais rica. Pode usar até oito pontos.
Como controlo a direção? Para gradientes lineares ou cônicos, o controlo 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 a forma como se espalha.