Gerador de gradiente CSS
Monte um gradiente linear ou radial com 2 ou 3 cores e copie o CSS background, com prévia.
- Roda no seu navegador
Carregando a ferramenta…
Ângulo e paradas de cor
No gradiente linear o ângulo diz para onde a cor avança: 0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda; 360deg é igual a 0deg. As cores ficam espaçadas por igual: com duas, em 0% e 100%; com três, em 0%, 50% e 100%.
| Entrada | Resultado |
|---|---|
| linear, 45 graus, #fff e #000 | background: linear-gradient(45deg, #ffffff, #000000); |
| linear, 180 graus, vermelho, verde e azul puros | background: linear-gradient(180deg, #ff0000, #00ff00, #0000ff); |
| linear, 90 graus, fa0 e 05F (abreviadas, expandidas na saída) | background: linear-gradient(90deg, #ffaa00, #0055ff); |
Gradiente radial
O radial parte do centro, onde fica a primeira cor, e chega à última no canto mais distante, em círculo. O ângulo não vale para ele e é ignorado: com 90 graus, #123456 e #654321 o resultado é background: radial-gradient(circle, #123456, #654321);
Limites do gradiente
- São 2 cores obrigatórias e uma terceira opcional, só em hexadecimal de 3 ou 6 dígitos; a prévia mostra o resultado, não há seletor de cor.
- Sem posição de cada parada, sem transição brusca, sem gradiente cônico nem repetido, e o centro do radial não muda de lugar.
- A saída usa a propriedade background, que redefine as outras propriedades de fundo do mesmo elemento.
Perguntas frequentes
Como o gerador de gradiente css define o ângulo?
Pelo campo de ângulo, de 0 a 360 graus, só no linear. 0 aponta para cima e 90 para a direita; o ângulo cresce no sentido horário.
Como fazer um css gradient com três cores?
Preencha a terceira cor. As três ficam a 0%, 50% e 100%. Com vermelho, verde e azul a 180 graus o resultado é background: linear-gradient(180deg, #ff0000, #00ff00, #0000ff);