Gerador de gradientes CSS
Crie um gradiente e copie o código CSS pronto a usar.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Crie o gradiente perfeito sem escrever uma linha de CSS
Os gradientes estão por todo o lado no design moderno: fundos de herói, botões, cartões, textos decorativos. Este gerador permite compô-los visualmente — cores, posições, ângulo, tipo — e copiar um código CSS limpo e pronto para produção.
-
Escolha o tipo
Linear para uma transição direcional, radial para um halo central, cónico para efeitos de roda ou de tarte.
-
Ajuste cores e posições
Mude cada cor no seletor, desloque a posição com o cursor, adicione até 6 paragens. O botão Aleatório sugere combinações harmoniosas.
-
Copie o CSS
O código atualiza-se em tempo real. Um clique e está na sua área de transferência.
Três funções, três geometrias
| Função | Geometria | Uso típico |
|---|---|---|
| linear-gradient(ângulo, …) | Linha reta orientada | Fundos, botões, overlays |
| radial-gradient(circle, …) | Círculos concêntricos | Halos, focos, vinhetas |
| conic-gradient(from ângulo, …) | Rotação em torno do centro | Gráficos circulares, rodas de cor, contornos animados |
Dicas para gradientes bem conseguidos
- Fique por tons vizinhos (análogos) para um resultado suave; tons opostos atravessam zonas cinzentas sem vida.
- Para texto em gradiente, combine background-clip: text com color: transparent.
- Em superfícies grandes, adicione um ruído subtil para evitar faixas visíveis (banding).
- Atenção ao contraste: o texto sobre um gradiente deve manter-se legível em toda a gama de cores.
O código gerado usa cores hexadecimais para máxima compatibilidade. Pode substituí-las por variáveis CSS (var(--minha-cor)) no seu projeto.
Perguntas frequentes
Qual é a diferença entre linear, radial e conic?
linear-gradient progride em linha reta segundo um ângulo; radial-gradient irradia do centro para fora; conic-gradient roda em torno do centro como uma roda cromática. Os três aceitam as mesmas listas de cores.
Quantas cores posso usar?
A ferramenta suporta até 6 paragens, o que cobre quase todas as necessidades. Em CSS puro o número é ilimitado, mas além de 4 ou 5 cores um gradiente torna-se difícil de controlar.
O que significam as percentagens junto às cores?
É a posição da paragem ao longo do eixo do gradiente: 0 % no início, 100 % no fim. Duas paragens próximas criam uma transição nítida; duas afastadas, um desvanecimento gradual.
O código gerado funciona em todos os navegadores?
linear-gradient e radial-gradient são suportados em todo o lado há anos. conic-gradient está disponível em todos os navegadores modernos (Chrome 69+, Firefox 83+, Safari 12.1+).
Como animar um gradiente CSS?
Os gradientes não se animam diretamente, mas duas técnicas funcionam bem: animar background-position num gradiente sobredimensionado (background-size: 200 %) ou animar as cores através de propriedades personalizadas registadas com @property.