Gerador de gradiente CSS
Escolha duas cores e um ângulo e copie o código do gradiente CSS.
Gerador de gradiente CSS
Esta ferramenta cria gradientes lineares CSS a partir de duas cores e um ângulo, com pré-visualização em direto e o código background pronto a copiar. Tudo no seu navegador.
Como funciona o linear-gradient
background: linear-gradient(ângulo, cor1, cor2);
O ângulo define a direção: 0° de baixo para cima, 90° da esquerda para a direita, 180° de cima para baixo. As cores podem ser HEX, RGB ou HSL.
Dicas
- Para gradientes subtis, use dois tons da mesma cor.
- Pode acrescentar mais paragens de cor manualmente no CSS.
- Combine com
background-sizepara efeitos animados.
Perguntas frequentes
Funciona em todos os navegadores? Sim, o linear-gradient tem suporte universal há anos.
Radiais ou cónicos? Esta versão cria lineares; os radiais/cónicos usam radial-gradient/conic-gradient.