Gerador de Gradientes CSS
Gere código CSS para gradientes lineares e radiais a partir de duas cores e um ângulo configurável.
Executar ferramenta
Este gerador de gradientes CSS permite criar transições de cor suaves para folhas de estilo web e elementos de interface. A ferramenta suporta formatos lineares e radiais com base em dois valores de cor e uma orientação angular opcional. Na configuração linear predefinida, o utilizador define a primeira e a segunda cor, bem como o ângulo pretendido em graus. O valor do ângulo é convertido para um número inteiro e ajustado automaticamente no intervalo de zero a trezentos e sessenta graus através de operação modular. Caso o campo do ângulo permaneça vazio ou receba um valor inválido, o sistema assume o valor base de quarenta e cinco graus. Na opção radial, o gradiente circular combina ambas as cores a partir do centro. Os valores de cor introduzidos são inseridos diretamente no código final sem validação intermédia de sintaxe, o que oferece rapidez na geração de estilos prontos a copiar para o seu projeto.
Instruções
- Indique a primeira cor pretendida em formato hexadecimal ou texto CSS no campo respetivo.
- Defina a segunda cor para compor a transição cromática.
- Escolha a orientação pretendida em graus no campo do ângulo para gradientes lineares.
- Indique o tipo de gradiente pretendido entre linear ou radial.
- Copie a declaração CSS apresentada no painel de resultados para o seu ficheiro de estilos.
Exemplos
- Gradiente linear a 90 graus entre #ff6b6b e #4ecdc4 para o fundo de uma barra de navegação.
- Gradiente radial circular a partir de duas tonalidades contrastantes para um elemento de destaque no ecrã.
Perguntas frequentes
O que acontece se introduzir um ângulo superior a 360 graus?
O valor é convertido para um número inteiro e ajustado ao intervalo circular de 360 graus através de operação modular.
Que formato é aplicado se o tipo de gradiente não for radial?
Qualquer valor diferente da opção radial utiliza a estrutura de gradiente linear com o ângulo configurado.
A ferramenta verifica a validade dos códigos de cor inseridos?
Os valores de cor são adicionados diretamente à regra CSS gerada sem uma etapa autónoma de validação de formato.