O que é um Gerador de Gradientes CSS?
Um gerador de gradientes CSS é uma ferramenta visual que permite projetar gradientes lineares, radiais ou cônicos e produz instantaneamente o código CSS correspondente. Em vez de escrever a sintaxe de gradiente manualmente, você pode ajustar cores, posições e ângulos interativamente e copiar o código pronto para uso diretamente na sua folha de estilos.
Como Usar Este Gerador de Gradientes CSS
- Escolha duas cores usando os seletores de cor, selecione um tipo de gradiente (linear, radial ou cônico) e ajuste o ângulo com o controle deslizante.
- A pré-visualização do gradiente e o código CSS são atualizados em tempo real conforme você faz alterações.
- Clique em “Aleatório” para gerar uma combinação aleatória de cores, ou “Copiar CSS” para copiar o código gerado.
Conceitos Principais
Um gradiente CSS é uma transição suave entre duas ou mais cores renderizada nativamente pelo navegador sem imagens. Gradientes lineares fluem em linha reta em um ângulo especificado. Gradientes radiais se expandem para fora a partir de um ponto central em forma circular ou elíptica. Os pontos de cor definem onde cada cor aparece ao longo do gradiente; ajustar suas posições controla a velocidade com que as cores se misturam.
Perguntas Frequentes
Quantas cores posso usar?
Esta ferramenta suporta dois pontos de cor. Para gradientes simples de duas cores, isso cobre os casos de uso mais comuns. Você pode adicionar manualmente mais pontos de cor editando o código CSS gerado diretamente.
O código CSS gerado é compatível com todos os navegadores?
Sim. Gradientes CSS modernos são suportados em todos os navegadores atuais incluindo Chrome, Firefox, Safari e Edge. O código gerado usa a sintaxe padrão sem prefixos de vendor.
Posso criar gradientes transparentes?
Sim. Defina o canal alfa em qualquer ponto de cor para criar áreas transparentes ou semi-transparentes. Isso é especialmente útil para efeitos de sobreposição e para fazer o conteúdo desaparecer em um fundo.