Crie gradientes CSS visualmente: monte lineares ou radiais com ângulo e paradas de cor, veja a prévia ao vivo e copie o código gerado.
Todos os cálculos acontecem localmente no seu navegador. Nada sai do seu dispositivo.
Os gradientes CSS são imagens geradas pelo navegador no momento da renderização: sem arquivos, sem requisições, independentes da resolução. Três sintaxes padrão cobrem quase todas as necessidades visuais, e todas compartilham o mesmo padrão de paradas de cor: uma lista de pares cor posição% que o navegador interpola entre si.
| Função | Forma da transição | Uso típico |
|---|---|---|
linear-gradient() | As cores se misturam ao longo de uma linha reta com ângulo | Fundos, botões, cabeçalhos, preenchimento de texto |
radial-gradient() | As cores se misturam de um centro para fora em círculos/elipses | Efeitos de brilho, vinhetas, luzes suaves |
conic-gradient() | As cores giram em torno de um centro como uma roda | Spinners, gráficos de pizza, UI de roda de cores |
Um gradiente linear mistura cores ao longo de uma linha reta com um ângulo (90° vai da esquerda para a direita, 0° vai de baixo para cima). Um gradiente radial mistura de um ponto central para fora em círculos ou elipses. Um gradiente cônico varre cores ao redor de um ponto central como uma roda de cores — perfeito para spinners e gráficos de pizza. Esta ferramenta gera lineares e radiais; a sintaxe cônica segue o mesmo padrão de paradas.
O ângulo é medido no sentido horário a partir da borda inferior: 0° aponta para cima, 90° para a direita, 180° para baixo e 270° para a esquerda. Então o 90° padrão é a mistura clássica da esquerda para a direita. Você também pode usar palavras-chave como to right ou to top left em vez de um número.
Uma parada de cor é uma cor mais sua posição ao longo do gradiente, dada como porcentagem de 0% (início) a 100% (fim). O navegador interpola suavemente entre paradas consecutivas. Duas paradas em 0% e 100% dão uma mistura uniforme; adicionar uma parada em 50% faz com que a cor intermediária caia exatamente no meio.
Sim, para a sintaxe padrão linear-gradient() e radial-gradient() todos os navegadores modernos — Chrome, Firefox, Safari, Edge — os renderizam de forma idêntica. Gradientes são um dos recursos CSS mais estáveis e não precisam mais de prefixos de vendor. Esta ferramenta gera apenas sintaxe padrão.
Não, as cores diretamente — background-image não é animável. O truque comum é fazer o elemento do gradiente ser maior que o contêiner e animar background-position, ou cruzar duas camadas de gradiente com opacidade. O CSS que você copia aqui é um gradiente estático único, que é a base de qualquer um desses truques.
Vai montar um componente completo em seguida? Organize o layout com o Gerador de CSS Flexbox ou o Gerador de CSS Grid, dê profundidade com o Gerador de Box Shadow e suavize os cantos no Gerador de Border Radius.
Se você acabou de usar Gerador de gradientes CSS, os próximos passos naturais são Gerador de paletas de cores, Conversor de cores, Verificador de contraste de cor, ou explore todas as ferramentas de Ferramentas de arquivos.