Gerador de Gradiente CSS Online Gratuito
Crie gradientes CSS lineares, radiais e cônicos com visualização em tempo real. Copie o código CSS instantaneamente.
Who uses the Gerador de Gradiente CSS?
- Desenvolvedores frontend criando gradientes de fundo para seções hero e componentes de UI.
- Designers prototipando identidades visuais baseadas em gradiente e transições de cores de marca.
- Aprendizes de CSS entendendo a sintaxe de gradientes através de um construtor visual e interativo.
How the Gerador de Gradiente CSS works
Selecione o tipo de gradiente: Linear, Radial ou Conic.
Clique na amostra de cor de um ponto de parada para mudar sua cor usando o seletor de cores.
Use o controle deslizante ao lado de cada ponto para ajustar sua posição, ou clique em "+ Add color stop" para um novo.
Ajuste o ângulo (linear/conic), depois copie o código CSS do painel de saída.
Tips & tricks
- Você precisa de pelo menos 2 pontos de cor — o botão de remover (×) só aparece com 3 ou mais pontos.
- Gradientes radiais escondem o controle de ângulo, já que um gradiente circular centralizado não tem direção a ajustar.
- Os pontos são sempre exibidos em ordem de posição no CSS de saída, independentemente da ordem em que você os adicionou.
- O seletor de cores não suporta canal alfa/transparência — adicione rgba() manualmente no CSS copiado se precisar de um ponto transparente.
Frequently Asked Questions
Qual é a sintaxe CSS para um gradiente linear?
background: linear-gradient(direção, cor1, cor2). Exemplo: background: linear-gradient(135deg, #667eea 0%, #764ba2 100%). A direção pode ser um ângulo (45deg) ou palavra-chave (to right, to bottom right).
Como crio um gradiente radial?
background: radial-gradient(forma tamanho at posição, cor1, cor2). Exemplo: background: radial-gradient(circle at center, #f6d365 0%, #fda085 100%). Esta ferramenta gera um gradiente radial circular centralizado.
Posso adicionar mais de dois pontos de cor?
Sim. Clique em "+ Add color stop" quantas vezes precisar. Cada ponto tem seu próprio seletor de cor e controle deslizante de posição, e os pontos são automaticamente ordenados por posição no CSS de saída.
Como crio um gradiente transparente?
Use rgba() ou hex com alfa para pontos transparentes. Exemplo: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%) cria um desvanecimento para escuro — comumente usado como overlay em imagens hero para legibilidade do texto. O seletor de cores desta ferramenta não inclui canal alfa, então edite o CSS copiado manualmente para transparência.
O gradiente CSS funciona em todos os navegadores?
Gradientes CSS são suportados em todos os navegadores modernos (Chrome, Firefox, Safari, Edge, Opera). Nenhum prefixo de fornecedor (-webkit-) é estritamente necessário para navegadores modernos, embora esta ferramenta inclua uma linha com prefixo -webkit- na saída para cobertura de navegadores mais antigos.
Is my data safe when using the Gerador de Gradiente CSS?
Completely safe. The Gerador de Gradiente CSS processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the Gerador de Gradiente CSS output in commercial projects?
Yes. The Gerador de Gradiente CSS is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the Gerador de Gradiente CSS follow official standards?
Yes. The Gerador de Gradiente CSS is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.