Para onde aponta o ângulo?

Segue a convenção do CSS: 0deg aponta para cima, 90deg para a direita, e continua no sentido horário. Isso está a um quarto de volta da convenção matemática, e é o motivo habitual de um gradiente sair girado em relação ao que você esperava.

Por que meu gradiente fica sujo no meio?

Porque ele cruza o centro da roda de cores. De azul para amarelo passa pelo cinza; de azul para roxo, não. Mantenha os dois matizes por perto, ou escolha um tom intermediário que você realmente queira e pare nele.

Dá para usar mais de duas cores?

Nesta página não: ela monta a declaração de duas paradas, que é a que quase todo mundo precisa. A sintaxe CSS aceita quantas paradas você quiser, então a saída é um ponto de partida ao qual dá para acrescentar à mão.

Início›Ferramentas de cor› Gerador de degradêNavegador

Criar um degradê CSS

Escolha duas cores e um ângulo, veja o resultado em toda a largura e copie a declaração CSS direto para a sua folha de estilos.

Para

Ângulo

background: linear-gradient(135deg, #2f6feb, #a855f7);

Como usar

1Escolha a cor inicial e a final.
2Defina o ângulo — 0° aponta para cima, e gira no sentido horário a partir daí.
3Copie a declaração CSS direto para a sua folha de estilos.

Perguntas frequentes

Para onde aponta o ângulo?: Segue a convenção do CSS: 0deg aponta para cima, 90deg para a direita, e continua no sentido horário. Isso está a um quarto de volta da convenção matemática, e é o motivo habitual de um gradiente sair girado em relação ao que você esperava.
Por que meu gradiente fica sujo no meio?: Porque ele cruza o centro da roda de cores. De azul para amarelo passa pelo cinza; de azul para roxo, não. Mantenha os dois matizes por perto, ou escolha um tom intermediário que você realmente queira e pare nele.
Dá para usar mais de duas cores?: Nesta página não: ela monta a declaração de duas paradas, que é a que quase todo mundo precisa. A sintaxe CSS aceita quantas paradas você quiser, então a saída é um ponto de partida ao qual dá para acrescentar à mão.